/* Choices for sass files compile to css files: 1 - sass --no-source-map scss/custom/_content.scss css/custom/content.css -w 2 - sudo sass --no-source-map scss/custom/_content.scss css/custom/content.css;drush8 cc css-js **/ @import url("https://fonts.googleapis.com/css?family=Tajawal:200,300,400,500,700,800,900&display=swap"); :root { --kku-size-10: 0.6138735420503376vw; --kku-size-11: 0.6752608962553714vw; --kku-size-12: 0.7366482504604052vw; --kku-size-13: 0.7980356046654389vw; --kku-size-14: 0.8594229588704727vw; --kku-size-15: 0.9208103130755064vw; --kku-size-16: 0.9821976672805403vw; --kku-size-17: 1.043585021485574vw; --kku-size-18: 1.1049723756906078vw; --kku-size-19: 1.1663597298956414vw; --kku-size-20: 1.2277470841006752vw; --kku-size-21: 1.289134438305709vw; --kku-size-22: 1.350521792510743vw; --kku-size-23: 1.4119091467157765vw; --kku-size-24: 1.4732965009208103vw; --kku-size-25: 1.5346838551258442vw; --kku-size-26: 1.5960712093308778vw; --kku-size-27: 1.6574585635359116vw; --kku-size-28: 1.7188459177409454vw; --kku-size-29: 1.780233271945979vw; --kku-size-30: 1.8416206261510129vw; --kku-size-31: 1.9030079803560467vw; --kku-size-32: 1.9643953345610805vw; --kku-size-33: 2.0257826887661143vw; --border-default: 1px solid var(--color-titles); --border-green: 1px solid var(--color-green); --border-deanships-blue: 1px solid var(--color-deanships-blue); --border-radius-default: 20px; --border-radius-max: 100%; --border-radius-small: 8px; --max-width-default: 1170px; --Block-title-default: 20px; --Block-title-medium: 25px; } /* 0 -> 400px --> (25em) : Small Phones 400px -> 600px --> (37.5em) : Phones 600px -> 900px : Tablet portrait 900px -> 1200px : Tablet landscape 1800px or larger:Big desktop screens $breakpoint variable choices: - phone-small - phone - tab-port - tab-land - big-desktop */ .header-section .icon-header { padding-top: 30px; display: flex; } .header-section .icon-header i { font-size: 30px; color: var(--color-deanships-blue); } .header-section .icon-header i::before, .header-section .icon-header i::after { font-family: "Font Awesome 5 Pro"; font-style: normal; } .header-section .view-header--inn, .header-section .view-header--inn { display: flex; align-items: center; padding-bottom: 30px; } .header-section .view-header--inn .title-section, .header-section .view-header--inn .paragraph--type--more-description .field--name-field-title, .paragraph--type--more-description .header-section .view-header--inn .field--name-field-title, .header-section .paragraph--type--more-description .Colleges-component .view-header .view-header--inn .field--name-field-title, .header-section .Colleges-component .view-header .view-header--inn .title-section, .Colleges-component .view-header .header-section .view-header--inn .title-section { margin-inline-end: 30px; } .title-section, .paragraph--type--more-description .field--name-field-title, .header-section .view-header--inn .paragraph--type--more-description .field--name-field-title, .paragraph--type--more-description .header-section .view-header--inn .field--name-field-title, .Colleges-component .view-header .view-header--inn .paragraph--type--more-description .field--name-field-title, .paragraph--type--more-description .Colleges-component .view-header .view-header--inn .field--name-field-title, .Colleges-component .view-header .view-header--inn .title-section, .header-section .view-header--inn .title-section { font-size: 28px; color: var(--color-deanships-blue); margin-bottom: 0; text-align: start; padding-block-start: 10px; font-weight: 600; } .title-inside-block a, .Programs-component .views-row .views-row--inn .program-title a, .Reports-component .view-content .views-row .views-row--inn .Report_body .Report_title a, .Success-Story-component .view-content .views-row--inn .success-story-content .success-story-title a, .News-component .view-content .views-row .views-row--inn .news-title a, .Services-component .view-content .views-row .views-row--inn .service-title a { color: var(--color-titles); font-size: 20px; width: 100%; display: flex; padding: 0; margin: 0; justify-content: center; } .title-inside-block a:hover, .Programs-component .views-row .views-row--inn .program-title a:hover, .Reports-component .view-content .views-row .views-row--inn .Report_body .Report_title a:hover, .Success-Story-component .view-content .views-row--inn .success-story-content .success-story-title a:hover, .News-component .view-content .views-row .views-row--inn .news-title a:hover, .Services-component .view-content .views-row .views-row--inn .service-title a:hover { text-decoration: none; } .p-inside-block, .paragraph--type--more-description .field--name-field-description, .Programs-component .views-row .views-row--inn .program-body, .Success-Story-component .view-content .views-row--inn .success-story-content .success-story-body, .Announcements-and-Events-component .view-content .views-row .views-row--inn .Announcements-and-Events-content .Announcements-and-Events-body, .Services-component .view-content .views-row .views-row--inn .service-content { color: var(--color-text-gray); font-size: 14px; font-weight: 300; } .slick-style.slick-initialized .slick-list, .Programs-component .slick-initialized.view-content .slick-list, .Departements-component .slick-initialized.view-content .slick-list, .Reports-component .slick-initialized.view-content .slick-list, .Success-Story-component .slick-initialized.view-content .slick-list, .Statistics-component .slick-initialized.view-content .slick-list, .Announcements-and-Events-component .slick-initialized.view-content .slick-list, .News-component .slick-initialized.view-content .slick-list, .Services-component .slick-initialized.view-content .slick-list { width: 100%; } [dir=rtl] .slick-style.slick-initialized .slick-list, [dir=rtl] .Programs-component .slick-initialized.view-content .slick-list, .Programs-component [dir=rtl] .slick-initialized.view-content .slick-list, [dir=rtl] .Departements-component .slick-initialized.view-content .slick-list, .Departements-component [dir=rtl] .slick-initialized.view-content .slick-list, [dir=rtl] .Reports-component .slick-initialized.view-content .slick-list, .Reports-component [dir=rtl] .slick-initialized.view-content .slick-list, [dir=rtl] .Success-Story-component .slick-initialized.view-content .slick-list, .Success-Story-component [dir=rtl] .slick-initialized.view-content .slick-list, [dir=rtl] .Statistics-component .slick-initialized.view-content .slick-list, .Statistics-component [dir=rtl] .slick-initialized.view-content .slick-list, [dir=rtl] .Announcements-and-Events-component .slick-initialized.view-content .slick-list, .Announcements-and-Events-component [dir=rtl] .slick-initialized.view-content .slick-list, [dir=rtl] .News-component .slick-initialized.view-content .slick-list, .News-component [dir=rtl] .slick-initialized.view-content .slick-list, [dir=rtl] .Services-component .slick-initialized.view-content .slick-list, .Services-component [dir=rtl] .slick-initialized.view-content .slick-list { direction: ltr; } .slick-style.slick-initialized .slick-list .slick-track, .Programs-component .slick-initialized.view-content .slick-list .slick-track, .Departements-component .slick-initialized.view-content .slick-list .slick-track, .Reports-component .slick-initialized.view-content .slick-list .slick-track, .Success-Story-component .slick-initialized.view-content .slick-list .slick-track, .Statistics-component .slick-initialized.view-content .slick-list .slick-track, .Announcements-and-Events-component .slick-initialized.view-content .slick-list .slick-track, .News-component .slick-initialized.view-content .slick-list .slick-track, .Services-component .slick-initialized.view-content .slick-list .slick-track, .slick-style.slick-initialized .slick-list .slick-track .slick-slide, .Programs-component .slick-initialized.view-content .slick-list .slick-track .slick-slide, .Departements-component .slick-initialized.view-content .slick-list .slick-track .slick-slide, .Reports-component .slick-initialized.view-content .slick-list .slick-track .slick-slide, .Success-Story-component .slick-initialized.view-content .slick-list .slick-track .slick-slide, .Statistics-component .slick-initialized.view-content .slick-list .slick-track .slick-slide, .Announcements-and-Events-component .slick-initialized.view-content .slick-list .slick-track .slick-slide, .News-component .slick-initialized.view-content .slick-list .slick-track .slick-slide, .Services-component .slick-initialized.view-content .slick-list .slick-track .slick-slide, .slick-style.slick-initialized .slick-list .slick-track .slick-slide > div, .Programs-component .slick-initialized.view-content .slick-list .slick-track .slick-slide > div, .Departements-component .slick-initialized.view-content .slick-list .slick-track .slick-slide > div, .Reports-component .slick-initialized.view-content .slick-list .slick-track .slick-slide > div, .Success-Story-component .slick-initialized.view-content .slick-list .slick-track .slick-slide > div, .Statistics-component .slick-initialized.view-content .slick-list .slick-track .slick-slide > div, .Announcements-and-Events-component .slick-initialized.view-content .slick-list .slick-track .slick-slide > div, .News-component .slick-initialized.view-content .slick-list .slick-track .slick-slide > div, .Services-component .slick-initialized.view-content .slick-list .slick-track .slick-slide > div, .slick-style.slick-initialized .slick-list .slick-track .slick-slide > div .views-row, .Programs-component .slick-initialized.view-content .slick-list .slick-track .slick-slide > div .views-row, .Departements-component .slick-initialized.view-content .slick-list .slick-track .slick-slide > div .views-row, .Reports-component .slick-initialized.view-content .slick-list .slick-track .slick-slide > div .views-row, .Success-Story-component .slick-initialized.view-content .slick-list .slick-track .slick-slide > div .views-row, .Statistics-component .slick-initialized.view-content .slick-list .slick-track .slick-slide > div .views-row, .Announcements-and-Events-component .slick-initialized.view-content .slick-list .slick-track .slick-slide > div .views-row, .News-component .slick-initialized.view-content .slick-list .slick-track .slick-slide > div .views-row, .Services-component .slick-initialized.view-content .slick-list .slick-track .slick-slide > div .views-row, .slick-style.slick-initialized .slick-list .slick-track .slick-slide > div .views-row .views-field.views-field-nothing, .Programs-component .slick-initialized.view-content .slick-list .slick-track .slick-slide > div .views-row .views-field.views-field-nothing, .Departements-component .slick-initialized.view-content .slick-list .slick-track .slick-slide > div .views-row .views-field.views-field-nothing, .Reports-component .slick-initialized.view-content .slick-list .slick-track .slick-slide > div .views-row .views-field.views-field-nothing, .Success-Story-component .slick-initialized.view-content .slick-list .slick-track .slick-slide > div .views-row .views-field.views-field-nothing, .Statistics-component .slick-initialized.view-content .slick-list .slick-track .slick-slide > div .views-row .views-field.views-field-nothing, .Announcements-and-Events-component .slick-initialized.view-content .slick-list .slick-track .slick-slide > div .views-row .views-field.views-field-nothing, .News-component .slick-initialized.view-content .slick-list .slick-track .slick-slide > div .views-row .views-field.views-field-nothing, .Services-component .slick-initialized.view-content .slick-list .slick-track .slick-slide > div .views-row .views-field.views-field-nothing { height: 98%; } .slick-style.slick-initialized .slick-list .slick-track, .Programs-component .slick-initialized.view-content .slick-list .slick-track, .Departements-component .slick-initialized.view-content .slick-list .slick-track, .Reports-component .slick-initialized.view-content .slick-list .slick-track, .Success-Story-component .slick-initialized.view-content .slick-list .slick-track, .Statistics-component .slick-initialized.view-content .slick-list .slick-track, .Announcements-and-Events-component .slick-initialized.view-content .slick-list .slick-track, .News-component .slick-initialized.view-content .slick-list .slick-track, .Services-component .slick-initialized.view-content .slick-list .slick-track { display: flex; column-gap: 15px; } .slick-style.slick-initialized .slick-dots, .Programs-component .slick-initialized.view-content .slick-dots, .Departements-component .slick-initialized.view-content .slick-dots, .Reports-component .slick-initialized.view-content .slick-dots, .Success-Story-component .slick-initialized.view-content .slick-dots, .Statistics-component .slick-initialized.view-content .slick-dots, .Announcements-and-Events-component .slick-initialized.view-content .slick-dots, .News-component .slick-initialized.view-content .slick-dots, .Services-component .slick-initialized.view-content .slick-dots { bottom: -60px; } .slick-style.slick-initialized .slick-dots li > button::before, .Programs-component .slick-initialized.view-content .slick-dots li > button::before, .Departements-component .slick-initialized.view-content .slick-dots li > button::before, .Reports-component .slick-initialized.view-content .slick-dots li > button::before, .Success-Story-component .slick-initialized.view-content .slick-dots li > button::before, .Statistics-component .slick-initialized.view-content .slick-dots li > button::before, .Announcements-and-Events-component .slick-initialized.view-content .slick-dots li > button::before, .News-component .slick-initialized.view-content .slick-dots li > button::before, .Services-component .slick-initialized.view-content .slick-dots li > button::before { font-size: 10px; } .slick-style.slick-initialized .slick-dots li:hover button::before, .Programs-component .slick-initialized.view-content .slick-dots li:hover button::before, .Departements-component .slick-initialized.view-content .slick-dots li:hover button::before, .Reports-component .slick-initialized.view-content .slick-dots li:hover button::before, .Success-Story-component .slick-initialized.view-content .slick-dots li:hover button::before, .Statistics-component .slick-initialized.view-content .slick-dots li:hover button::before, .Announcements-and-Events-component .slick-initialized.view-content .slick-dots li:hover button::before, .News-component .slick-initialized.view-content .slick-dots li:hover button::before, .Services-component .slick-initialized.view-content .slick-dots li:hover button::before, .slick-style.slick-initialized .slick-dots li > button:hover button::before, .Programs-component .slick-initialized.view-content .slick-dots li > button:hover button::before, .Departements-component .slick-initialized.view-content .slick-dots li > button:hover button::before, .Reports-component .slick-initialized.view-content .slick-dots li > button:hover button::before, .Success-Story-component .slick-initialized.view-content .slick-dots li > button:hover button::before, .Statistics-component .slick-initialized.view-content .slick-dots li > button:hover button::before, .Announcements-and-Events-component .slick-initialized.view-content .slick-dots li > button:hover button::before, .News-component .slick-initialized.view-content .slick-dots li > button:hover button::before, .Services-component .slick-initialized.view-content .slick-dots li > button:hover button::before, .slick-style.slick-initialized .slick-dots li.slick-active > button::before, .Programs-component .slick-initialized.view-content .slick-dots li.slick-active > button::before, .Departements-component .slick-initialized.view-content .slick-dots li.slick-active > button::before, .Reports-component .slick-initialized.view-content .slick-dots li.slick-active > button::before, .Success-Story-component .slick-initialized.view-content .slick-dots li.slick-active > button::before, .Statistics-component .slick-initialized.view-content .slick-dots li.slick-active > button::before, .Announcements-and-Events-component .slick-initialized.view-content .slick-dots li.slick-active > button::before, .News-component .slick-initialized.view-content .slick-dots li.slick-active > button::before, .Services-component .slick-initialized.view-content .slick-dots li.slick-active > button::before { color: var(--color-titles); } .slick-style.slick-initialized button.slick-next::before, .Programs-component .slick-initialized.view-content button.slick-next::before, .Departements-component .slick-initialized.view-content button.slick-next::before, .Reports-component .slick-initialized.view-content button.slick-next::before, .Success-Story-component .slick-initialized.view-content button.slick-next::before, .Statistics-component .slick-initialized.view-content button.slick-next::before, .Announcements-and-Events-component .slick-initialized.view-content button.slick-next::before, .News-component .slick-initialized.view-content button.slick-next::before, .Services-component .slick-initialized.view-content button.slick-next::before, .slick-style.slick-initialized button.slick-prev::before, .Programs-component .slick-initialized.view-content button.slick-prev::before, .Departements-component .slick-initialized.view-content button.slick-prev::before, .Reports-component .slick-initialized.view-content button.slick-prev::before, .Success-Story-component .slick-initialized.view-content button.slick-prev::before, .Statistics-component .slick-initialized.view-content button.slick-prev::before, .Announcements-and-Events-component .slick-initialized.view-content button.slick-prev::before, .News-component .slick-initialized.view-content button.slick-prev::before, .Services-component .slick-initialized.view-content button.slick-prev::before { font-size: 36px; } .slick-style.slick-initialized button.slick-next, .Programs-component .slick-initialized.view-content button.slick-next, .Departements-component .slick-initialized.view-content button.slick-next, .Reports-component .slick-initialized.view-content button.slick-next, .Success-Story-component .slick-initialized.view-content button.slick-next, .Statistics-component .slick-initialized.view-content button.slick-next, .Announcements-and-Events-component .slick-initialized.view-content button.slick-next, .News-component .slick-initialized.view-content button.slick-next, .Services-component .slick-initialized.view-content button.slick-next { top: 50%; right: 15px; left: auto; } .slick-style.slick-initialized button.slick-prev, .Programs-component .slick-initialized.view-content button.slick-prev, .Departements-component .slick-initialized.view-content button.slick-prev, .Reports-component .slick-initialized.view-content button.slick-prev, .Success-Story-component .slick-initialized.view-content button.slick-prev, .Statistics-component .slick-initialized.view-content button.slick-prev, .Announcements-and-Events-component .slick-initialized.view-content button.slick-prev, .News-component .slick-initialized.view-content button.slick-prev, .Services-component .slick-initialized.view-content button.slick-prev { top: 50%; right: auto; left: 15px; } .slick-arrows button, .hearo-section button, .Success-Story-component .view-content button { z-index: 1; } .slick-arrows button.slick-next::before, .hearo-section button.slick-next::before, .Success-Story-component .view-content button.slick-next::before, .slick-arrows button.slick-prev::before, .hearo-section button.slick-prev::before, .Success-Story-component .view-content button.slick-prev::before { font-size: 36px; font-family: "Font Awesome 5 Pro"; color: var(--color-titles); } .slick-arrows button.slick-next, .hearo-section button.slick-next, .Success-Story-component .view-content button.slick-next { top: 50%; right: 15px; left: auto; } .slick-arrows button.slick-next:before, .hearo-section button.slick-next:before, .Success-Story-component .view-content button.slick-next:before { content: "\f054"; } .slick-arrows button.slick-prev, .hearo-section button.slick-prev, .Success-Story-component .view-content button.slick-prev { top: 50%; right: auto; left: 15px; } .slick-arrows button.slick-prev:before, .hearo-section button.slick-prev:before, .Success-Story-component .view-content button.slick-prev:before { content: "\f053"; } @keyframes fadeInUpSD { 0% { opacity: 0; transform: translateY(200px); } 100% { opacity: 1; transform: none; } } @keyframes fadeInRight { 0% { opacity: 0; transform: translateX(200px); } 100% { opacity: 1; transform: none; } } @keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-200px); } 100% { opacity: 1; transform: none; } } @keyframes ImageZoom { 0% { opacity: 0.7; transition: transform 1.8s, filter 2.8s ease-in-out; filter: blur(4px); transform: scale(1.2); } 100% { opacity: 1; filter: blur(0) !important; transform: scale(1) !important; } } .fadeInUpSD { animation-name: fadeInUpSD; } .fadeInRight { animation-name: fadeInRight; } .fadeInLeft { animation-name: fadeInLeft; } .header-section .icon-header { padding-top: 30px; display: flex; } .header-section .icon-header i { font-size: 30px; color: var(--color-deanships-blue); } .header-section .icon-header i::before, .header-section .icon-header i::after { font-family: "Font Awesome 5 Pro"; font-style: normal; } .header-section .view-header--inn { display: flex; align-items: center; padding-bottom: 30px; } .header-section .view-header--inn .title-section, .header-section .view-header--inn .paragraph--type--more-description .field--name-field-title, .paragraph--type--more-description .header-section .view-header--inn .field--name-field-title, .header-section .paragraph--type--more-description .Colleges-component .view-header .view-header--inn .field--name-field-title, .header-section .Colleges-component .view-header .view-header--inn .title-section, .Colleges-component .view-header .header-section .view-header--inn .title-section { margin-inline-end: 30px; } .title-section, .paragraph--type--more-description .field--name-field-title, .header-section .view-header--inn .paragraph--type--more-description .field--name-field-title, .paragraph--type--more-description .header-section .view-header--inn .field--name-field-title, .Colleges-component .view-header .view-header--inn .paragraph--type--more-description .field--name-field-title, .paragraph--type--more-description .Colleges-component .view-header .view-header--inn .field--name-field-title, .Colleges-component .view-header .view-header--inn .title-section, .header-section .view-header--inn .title-section { font-size: 28px; color: var(--color-deanships-blue); margin-bottom: 0; text-align: start; padding-block-start: 10px; font-weight: 600; } /** -- General style for buttons -- */ .button-style, .path-user div#block-kkucolleges-content .form-actions input#edit-submit, .path-webform .webform-submission-form .form-actions .webform-button--submit, .danships-button-blue-fill, .Services-component--page.Services-component .view-filters .views-exposed-form .form--inline .form-actions .button, .paragraph--type--more-description .field--name-field-more a, .Success-Story-component .view-content .views-row--inn .sucess-story-view-node a, .Announcements-and-Events-component .view-content .views-row .views-row--inn .Announcements-and-Events-link .Announcements-and-Events-view-node a, .Services-component .view-content .views-row .views-row--inn .service-cta .service-view-node a, .Colleges-component .view-filters .form-actions .button, .danships-button-blue-border, .Forms-component--page .view-content .views-row .views-field .field-content .views-row--inn .Form-cta .form-link a, .Services-component--page.Services-component .view-filters .views-exposed-form .form--inline .form-item select, .News-component .view-content .views-row .views-row--inn .news-cta .news-view-node a, .Colleges-component .view-header .more, .danships-button-white-fill, .Forms-component .view-header .more, .Services-component .view-filters .views-exposed-form .form--inline .form-actions .button, .danships-button-white-border, .hearo-section .slick-track .slick-slide.slick-current .slider-description-more .slider-more a, .Services-component .view-filters .views-exposed-form .form--inline .form-item select, .Services-component .view-header .view-header--inn .more, .button-white-fill, .Programs-component .views-row .views-row--inn .program-cta .program-view-node a, .button-blue-fill, .button-blue-border, .path-user div#block-kkucolleges-content a#edit-cas-login-link, .Taxonomy-component .view-content .views-row .views-row--inn .Taxonomy-cta .Taxonomy-view-node a, .News-component--page .view-content .views-row .views-row--inn .news-cta a, .Reports-component .view-content .views-row .views-row--inn .Report_body .Report_file.download_btn a, .download_btn, .more-btn, .Colleges-component .view-header .view-header--inn .more, .header-section .view-header--inn .more { display: flex; align-items: center; justify-content: center; border-radius: 0.6rem; width: 8rem; height: 2rem; font-size: 14px; padding-block-start: 5px; transition: background-color 0.5s ease-in-out; } .button-style:hover, .path-user div#block-kkucolleges-content .form-actions input#edit-submit:hover, .path-webform .webform-submission-form .form-actions .webform-button--submit:hover, .danships-button-blue-fill:hover, .paragraph--type--more-description .field--name-field-more a:hover, .Success-Story-component .view-content .views-row--inn .sucess-story-view-node a:hover, .Announcements-and-Events-component .view-content .views-row .views-row--inn .Announcements-and-Events-link .Announcements-and-Events-view-node a:hover, .Services-component .view-content .views-row .views-row--inn .service-cta .service-view-node a:hover, .Colleges-component .view-filters .form-actions .button:hover, .danships-button-blue-border:hover, .Forms-component--page .view-content .views-row .views-field .field-content .views-row--inn .Form-cta .form-link a:hover, .Services-component--page.Services-component .view-filters .views-exposed-form .form--inline .form-item select:hover, .News-component .view-content .views-row .views-row--inn .news-cta .news-view-node a:hover, .Colleges-component .view-header .more:hover, .danships-button-white-fill:hover, .Forms-component .view-header .more:hover, .Services-component .view-filters .views-exposed-form .form--inline .form-actions .button:hover, .danships-button-white-border:hover, .hearo-section .slick-track .slick-slide.slick-current .slider-description-more .slider-more a:hover, .Services-component .view-filters .views-exposed-form .form--inline .form-item select:hover, .Services-component .view-header .view-header--inn .more:hover, .button-white-fill:hover, .Programs-component .views-row .views-row--inn .program-cta .program-view-node a:hover, .button-blue-fill:hover, .button-blue-border:hover, .path-user div#block-kkucolleges-content a#edit-cas-login-link:hover, .Taxonomy-component .view-content .views-row .views-row--inn .Taxonomy-cta .Taxonomy-view-node a:hover, .News-component--page .view-content .views-row .views-row--inn .news-cta a:hover, .Reports-component .view-content .views-row .views-row--inn .Report_body .Report_file.download_btn a:hover, .download_btn:hover, .more-btn:hover, .header-section .view-header--inn .more:hover { text-decoration: none; } .download_btn, .Reports-component .view-content .views-row .views-row--inn .Report_body .Report_file.download_btn a { width: 10rem; } .events-container { background: #f8f8f8; } .News-continer { background-color: #ffffff !important; } .dept-container { background: linear-gradient(to left top, rgba(28, 102, 149, 0.5), rgba(28, 102, 149, 0.5)), url(../../images/departments-block-background.png) !important; background-size: cover !important; background-repeat: no-repeat !important; background-position: center !important; background-attachment: fixed !important; position: relative; } .Forms-continer { background-image: url(../../images/forms-block-background.png); background-size: cover; background-repeat: no-repeat; background-position: center; } i.fa-twitter { color: #3fa9f5 !important; } i.fa-facebook-f { color: #0b5b7e !important; } i.fa-snapchat-ghost { color: #fdfb06 !important; text-shadow: 0px 0px black; } i.fa-instagram { color: #cc076e !important; } i.fa-youtube { color: #e81d24 !important; } .node__content .field--name-field-main-content-blocks > .field__item:nth-child(odd) { background: #ffffff !important; } .paragraph-advanced .paragraph-advanced-item img { max-width: 100%; height: auto; } /* --------- * variables colors * ----------- --------- * ---------------- * ----------- */ :root { --color-main: white; --color-light: #f7f7f7; --bgcolor-block: #f8f8f8; --color-light3: #f0f0f0; --color-gray: #e3e3e3; --color-titles: #42526e; --color-titles-block: #427e59; --color-text-gray: #707070; --color-event-green: #2d905b; --color-event-gray: #7b7b7b; --color-event-red: #902d2d; --color-event-black: #2c2c2c; --color-icon: #afafaf; --color-site-title--old: #b7b7b7; --color-site-title: #427e59; --color-green: #427e59; --color-green-light: #d8e5de; /* ------ * Deanships colors * ------ */ --color-deanships-blue: rgb(28, 102, 149); --color-deanships-blue-1: #114b6e; --color-deanships-black: rgb(22, 23, 25); --color-deanships-gray: #848484; } .meditation { --color-main: lightcoral; } .spirituality { --color-main: blue; } .creativity { --color-main: maroon; } .standard { --color-main: green; } /* --------- * background-color * ----------- --------- * ---------------- * ----------- */ .node__content .field--name-field-main-content-blocks > .field__item:nth-child(even) { background: var(--bgcolor-block); } /* --------- * color * ----------- --------- * ----- * ----------- */ /* --------- * border-color * ----------- --------- * ------------ * ----------- */ /* --------- * buttons-color * ----------- --------- * ------------- * ----------- */ .button-blue-border, .path-user div#block-kkucolleges-content a#edit-cas-login-link, .Taxonomy-component .view-content .views-row .views-row--inn .Taxonomy-cta .Taxonomy-view-node a, .News-component--page .view-content .views-row .views-row--inn .news-cta a, .Reports-component .view-content .views-row .views-row--inn .Report_body .Report_file.download_btn a { border: var(--border-green); color: var(--color-green); } .button-blue-border:hover, .path-user div#block-kkucolleges-content a#edit-cas-login-link:hover, .Taxonomy-component .view-content .views-row .views-row--inn .Taxonomy-cta .Taxonomy-view-node a:hover, .News-component--page .view-content .views-row .views-row--inn .news-cta a:hover, .Reports-component .view-content .views-row .views-row--inn .Report_body .Report_file.download_btn a:hover, .button-blue-border:focus, .path-user div#block-kkucolleges-content a#edit-cas-login-link:focus, .Taxonomy-component .view-content .views-row .views-row--inn .Taxonomy-cta .Taxonomy-view-node a:focus, .News-component--page .view-content .views-row .views-row--inn .news-cta a:focus, .Reports-component .view-content .views-row .views-row--inn .Report_body .Report_file.download_btn a:focus, .button-blue-border:active, .path-user div#block-kkucolleges-content a#edit-cas-login-link:active, .Taxonomy-component .view-content .views-row .views-row--inn .Taxonomy-cta .Taxonomy-view-node a:active, .News-component--page .view-content .views-row .views-row--inn .news-cta a:active, .Reports-component .view-content .views-row .views-row--inn .Report_body .Report_file.download_btn a:active { color: var(--bgcolor-block); background-color: var(--color-titles-block); } .button-blue-fill { border: var(--border-green); background-color: var(--color-titles); color: var(--color-main); } .button-blue-fill:hover, .button-blue-fill:focus, .button-blue-fill:active { background-color: rgba(66, 82, 110, 0.8) !important; border: none; box-shadow: none !important; } .button-white-fill, .Programs-component .views-row .views-row--inn .program-cta .program-view-node a { border: var(--border-default); border-color: white; background-color: var(--color-main); color: var(--color-titles); } .button-white-fill:hover, .Programs-component .views-row .views-row--inn .program-cta .program-view-node a:hover, .button-white-fill:focus, .Programs-component .views-row .views-row--inn .program-cta .program-view-node a:focus, .button-white-fill:active, .Programs-component .views-row .views-row--inn .program-cta .program-view-node a:active { background-color: rgba(255, 255, 255, 0.8) !important; border: none; box-shadow: none !important; } /* --------- * Deanships buttons * ----------- --------- * ------------- * ----------- */ .danships-button-white-border, .hearo-section .slick-track .slick-slide.slick-current .slider-description-more .slider-more a, .Services-component .view-filters .views-exposed-form .form--inline .form-item select, .Services-component .view-header .view-header--inn .more { border: 1px solid var(--color-main) !important; color: var(--color-main) !important; } .danships-button-white-border:hover, .hearo-section .slick-track .slick-slide.slick-current .slider-description-more .slider-more a:hover, .Services-component .view-filters .views-exposed-form .form--inline .form-item select:hover, .Services-component .view-header .view-header--inn .more:hover, .danships-button-white-border:focus, .hearo-section .slick-track .slick-slide.slick-current .slider-description-more .slider-more a:focus, .Services-component .view-filters .views-exposed-form .form--inline .form-item select:focus, .Services-component .view-header .view-header--inn .more:focus, .danships-button-white-border:active, .hearo-section .slick-track .slick-slide.slick-current .slider-description-more .slider-more a:active, .Services-component .view-filters .views-exposed-form .form--inline .form-item select:active, .Services-component .view-header .view-header--inn .more:active { --color-main: rgba(255, 255, 255, 0.3); background-color: var(--color-main) !important; border: 1px solid white !important; color: white !important; } .danships-button-white-fill, .Forms-component .view-header .more, .Services-component .view-filters .views-exposed-form .form--inline .form-actions .button { border: 1px solid var(--color-main) !important; color: var(--color-deanships-blue) !important; background-color: var(--color-main) !important; } .danships-button-white-fill:hover, .Forms-component .view-header .more:hover, .Services-component .view-filters .views-exposed-form .form--inline .form-actions .button:hover, .danships-button-white-fill:focus, .Forms-component .view-header .more:focus, .Services-component .view-filters .views-exposed-form .form--inline .form-actions .button:focus, .danships-button-white-fill:active, .Forms-component .view-header .more:active, .Services-component .view-filters .views-exposed-form .form--inline .form-actions .button:active { --color-main: rgba(255, 255, 255, 0.3); background-color: var(--color-main) !important; border: 1px solid white !important; color: white !important; } .danships-button-blue-border, .Forms-component--page .view-content .views-row .views-field .field-content .views-row--inn .Form-cta .form-link a, .Services-component--page.Services-component .view-filters .views-exposed-form .form--inline .form-item select, .News-component .view-content .views-row .views-row--inn .news-cta .news-view-node a, .Colleges-component .view-header .more { border: var(--border-deanships-blue) !important; color: var(--color-deanships-blue) !important; } .danships-button-blue-border:hover, .Forms-component--page .view-content .views-row .views-field .field-content .views-row--inn .Form-cta .form-link a:hover, .Services-component--page.Services-component .view-filters .views-exposed-form .form--inline .form-item select:hover, .News-component .view-content .views-row .views-row--inn .news-cta .news-view-node a:hover, .Colleges-component .view-header .more:hover, .danships-button-blue-border:focus, .Forms-component--page .view-content .views-row .views-field .field-content .views-row--inn .Form-cta .form-link a:focus, .Services-component--page.Services-component .view-filters .views-exposed-form .form--inline .form-item select:focus, .News-component .view-content .views-row .views-row--inn .news-cta .news-view-node a:focus, .Colleges-component .view-header .more:focus, .danships-button-blue-border:active, .Forms-component--page .view-content .views-row .views-field .field-content .views-row--inn .Form-cta .form-link a:active, .Services-component--page.Services-component .view-filters .views-exposed-form .form--inline .form-item select:active, .News-component .view-content .views-row .views-row--inn .news-cta .news-view-node a:active, .Colleges-component .view-header .more:active { background-color: var(--color-deanships-blue) !important; color: var(--color-main) !important; border: none !important; box-shadow: none !important; } .danships-button-blue-fill, .Services-component--page.Services-component .view-filters .views-exposed-form .form--inline .form-actions .button, .paragraph--type--more-description .field--name-field-more a, .Success-Story-component .view-content .views-row--inn .sucess-story-view-node a, .Announcements-and-Events-component .view-content .views-row .views-row--inn .Announcements-and-Events-link .Announcements-and-Events-view-node a, .Services-component .view-content .views-row .views-row--inn .service-cta .service-view-node a, .Colleges-component .view-filters .form-actions .button { border: var(--border-deanships-blue) !important; background-color: var(--color-deanships-blue) !important; color: var(--color-main) !important; } .danships-button-blue-fill:hover, .Services-component--page.Services-component .view-filters .views-exposed-form .form--inline .form-actions .button:hover, .paragraph--type--more-description .field--name-field-more a:hover, .Success-Story-component .view-content .views-row--inn .sucess-story-view-node a:hover, .Announcements-and-Events-component .view-content .views-row .views-row--inn .Announcements-and-Events-link .Announcements-and-Events-view-node a:hover, .Services-component .view-content .views-row .views-row--inn .service-cta .service-view-node a:hover, .Colleges-component .view-filters .form-actions .button:hover, .danships-button-blue-fill:focus, .Services-component--page.Services-component .view-filters .views-exposed-form .form--inline .form-actions .button:focus, .paragraph--type--more-description .field--name-field-more a:focus, .Success-Story-component .view-content .views-row--inn .sucess-story-view-node a:focus, .Announcements-and-Events-component .view-content .views-row .views-row--inn .Announcements-and-Events-link .Announcements-and-Events-view-node a:focus, .Services-component .view-content .views-row .views-row--inn .service-cta .service-view-node a:focus, .Colleges-component .view-filters .form-actions .button:focus, .danships-button-blue-fill:active, .Services-component--page.Services-component .view-filters .views-exposed-form .form--inline .form-actions .button:active, .paragraph--type--more-description .field--name-field-more a:active, .Success-Story-component .view-content .views-row--inn .sucess-story-view-node a:active, .Announcements-and-Events-component .view-content .views-row .views-row--inn .Announcements-and-Events-link .Announcements-and-Events-view-node a:active, .Services-component .view-content .views-row .views-row--inn .service-cta .service-view-node a:active, .Colleges-component .view-filters .form-actions .button:active { --color-deanships-blue: #1c6795a5; background-color: var(--color-deanships-blue) !important; box-shadow: none !important; } body { font-family: "Tajawal", sans-serif !important; } main { margin-block-end: 80px; } .header-kku.sticky { position: fixed; width: 100%; top: 0; left: 0; z-index: 200; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); transition: all 0.5s ease-in-out; } .header-kku.sticky + header { margin-block-start: 120px; } .user-logged-in .header-kku.sticky { padding-left: 68px; transition: none; } ul.nice-menu, ul.nice-menu ul { z-index: 100 !important; } header .navbar-brand { padding-block-end: 10px; } header .navbar-brand > div { margin-block-start: 15px; } header .navbar-brand > div .site-title { color: var(--color-deanships-blue); margin-block-start: 30px; transition: all 0.3s ease-in-out; } header .navbar-brand > div .site-title:hover, header .navbar-brand > div .site-title:focus, header .navbar-brand > div .site-title:visited { color: var(--color-deanships-blue); opacity: 0.8; } footer.footer- { margin-block-start: 80px !important; } .path-frontpage .page-title { display: none; } .node__content .field--name-field-main-content-blocks > .field__item .field__items { max-width: 1170px; margin: 0 auto; padding-block: 50px; } .node__content .field__item .field__item { max-width: var(--max-width-default); width: 100%; margin: 0 auto; max-width: 100%; } .views-exposed-form .form--inline { display: flex; } .views-exposed-form .form--inline .form-item { display: flex; } .views-exposed-form .form--inline .form-item label { display: flex; align-items: center; margin-inline-end: 15px; } /* ------------------ Website components ------------------ */ .Colleges-component .view-header .icon-header { padding-top: 30px; display: flex; } .Colleges-component .view-header .icon-header i { font-size: 30px; color: var(--color-deanships-blue); } .Colleges-component .view-header .icon-header i::before, .Colleges-component .view-header .icon-header i::after { font-family: "Font Awesome 5 Pro"; font-style: normal; } .Colleges-component .view-header .view-header--inn { display: flex; align-items: center; padding-bottom: 30px; } .Colleges-component .view-header .view-header--inn .title-section, .Colleges-component .view-header .view-header--inn .paragraph--type--more-description .field--name-field-title, .paragraph--type--more-description .Colleges-component .view-header .view-header--inn .field--name-field-title, .Colleges-component .view-header .paragraph--type--more-description .header-section .view-header--inn .field--name-field-title { margin-inline-end: 30px; } .Colleges-component .view-filters { margin-block-end: 60px; } .Colleges-component .view-filters .views-exposed-form .form--inline .form-item, .Colleges-component .view-filters .views-exposed-form .form--inline .form-control { height: 2rem; border-radius: 10px; color: var(--color-deanships-blue); } .Colleges-component .view-filters .views-exposed-form .form--inline .form-item select { width: fit-content; background-color: transparent; padding-block-start: 9px; border: var(--border-deanships-blue); } .Colleges-component .view-filters .views-exposed-form .form--inline .form-item .form-text { border-color: var(--border-deanships-blue); } .Colleges-component .view-filters .views-exposed-form .form--inline .form-item.js-form-type-textfield { order: 1; } .Colleges-component .view-filters .views-exposed-form .form--inline .form-item.js-form-type-select { order: 2; margin-inline-end: 6px; } .Colleges-component .view-filters .form-actions { order: 3; } .Colleges-component .view-filters .form-actions .button { padding: 0 !important; padding-block-start: 5px !important; } .Colleges-component .view-content { display: flex; flex-flow: row wrap; column-gap: 15px; margin-block-end: 30px; } .Colleges-component .view-content .views-row .views-row--inn { display: flex; flex-flow: row wrap; max-width: 1170px; } .Services-continer { background-image: url("../../images/services-background.png"); background-image: url("../../images/services-block-background.png"); background-size: cover; background-position: center; background-repeat: no-repeat; } .Services-component { max-width: 1170px; margin: 0 auto; display: flex; flex-direction: column; justify-content: flex-start; text-align: start; } .Services-component .view-header .icon-header i, .Services-component .view-header .view-header--inn .title-section, .Services-component .view-header .view-header--inn .paragraph--type--more-description .field--name-field-title, .paragraph--type--more-description .Services-component .view-header .view-header--inn .field--name-field-title, .Services-component .view-header .paragraph--type--more-description .header-section .view-header--inn .field--name-field-title, .Services-component .paragraph--type--more-description .Colleges-component .view-header .view-header--inn .field--name-field-title { color: var(--color-main); } .Services-component .view-content { margin-top: 30px; /* Start: This style will add just in case add slick slider to the block --> (will use slick in responsive only) */ } .Services-component .view-content .views-row { margin-bottom: 20px; padding-inline: 0; margin-inline: 0; width: 100% !important; flex: 0 0 calc(25% - 15px); background-color: rgba(17, 75, 110, 0.6); border-radius: var(--border-radius-default); display: flex; position: relative; } .Services-component .view-content .views-row .overlay { backdrop-filter: blur(7px); content: ""; position: absolute; height: 100%; width: 100%; z-index: 9; background: var(--color-deanships-blue-1); border-radius: 10px; opacity: 0.7; } .Services-component .view-content .views-row span.field-content { position: relative; height: 100%; display: flex; flex-direction: column; width: 100%; } .Services-component .view-content .views-row span.field-content > img { position: absolute; height: 100%; width: 100%; border-radius: 10px; object-fit: cover; object-position: left; } .Services-component .view-content .views-row .views-row--inn { flex-flow: column nowrap !important; justify-content: space-between; height: 100%; min-height: 230px; z-index: 9; padding-block: 20px; padding-inline: 20px; row-gap: 10px; } .Services-component .view-content .views-row .views-row--inn .service-header { display: flex; column-gap: 15px; } .Services-component .view-content .views-row .views-row--inn .service-header .service-icon { flex: 0 0 25%; } .Services-component .view-content .views-row .views-row--inn .service-header .service-icon img { width: 100%; height: 100%; } .Services-component .view-content .views-row .views-row--inn .service-image { margin: 0 auto; margin-top: 80px; } .Services-component .view-content .views-row .views-row--inn .service-image img { width: 100%; object-fit: cover; height: 100px; margin-bottom: 13px; } .Services-component .view-content .views-row .views-row--inn .service-image .service-icon { justify-content: flex-end; width: 100%; display: flex; margin-top: -46px; margin-inline-start: -8px; } .Services-component .view-content .views-row .views-row--inn .service-image .service-icon img { width: 100%; height: 100%; } .Services-component .view-content .views-row .views-row--inn .service-title { align-self: center; } .Services-component .view-content .views-row .views-row--inn .service-title, .Services-component .view-content .views-row .views-row--inn .service-title a { color: var(--color-main); font-size: 16px; font-weight: 600; } .Services-component .view-content .views-row .views-row--inn .service-content { display: flex; flex-direction: column; flex-grow: 1; font-size: 14px; color: var(--color-main); } .Services-component .view-content .views-row .views-row--inn .service-content .service-body { flex: 1; } .Services-component .view-content .views-row .views-row--inn .service-content .service-body p { font-weight: 400; } .Services-component .view-content .views-row .views-row--inn .service-content .service-category, .Services-component .view-content .views-row .views-row--inn .service-content .service-department { font-size: 12px; font-weight: 500; } .Services-component .view-content .views-row .views-row--inn .service-cta { display: flex; justify-content: flex-end; } .Services-component .view-content .views-row .views-row--inn .service-cta .service-view-node { display: flex; column-gap: 10px; } .Services-component .view-content .views-row .views-row--inn .service-cta .service-view-node a { color: var(--color-main); max-width: 90px; display: flex; align-items: center; border: 1px solid #346e4b; background-color: var(--color-deanships-blue); border-color: var(--color-deanships-blue); } .Services-component .view-content .views-row .views-row--inn .service-cta .service-view-node a i { margin-inline-start: 6px; margin-bottom: 6px; } .Services-component.slick-component .slick-track { width: 100% !important; } .block-views-blocknews-block-1 > div .News-component { display: flex; flex-flow: row wrap; column-gap: 15px; justify-content: space-between; align-items: stretch; } .News-component .view-header { flex: 0 0 100%; } .News-component .view-header + .attachment .News-component .view-content .views-row .views-row--inn { padding-block-end: 20px; } .News-component .view-header + .attachment .News-component .view-content .views-row .views-row--inn .news-title, .News-component .view-header + .attachment .News-component .view-content .views-row .views-row--inn .news-date, .News-component .view-header + .attachment .News-component .view-content .views-row .views-row--inn .news-content, .News-component .view-header + .attachment .News-component .view-content .views-row .views-row--inn .news-cta { padding-inline: 30px; } .News-component .attachment .view-content { flex: 0 0 100%; } .News-component .attachment .view-content .views-row { padding: 0; } .News-component .attachment .view-content .views-row .views-row--inn { min-height: 425px; } .News-component .attachment .view-content .views-row .views-row--inn .news-image { margin-block-end: 20px; } .News-component .attachment .view-content .views-row .views-row--inn .news-image img { width: 100%; height: 100%; border-top-left-radius: var(--border-radius-default); border-top-right-radius: var(--border-radius-default); } .News-component .view-content { display: flex; flex-flow: row wrap; margin-block: 0; row-gap: 15px; /* Start: This style will add just in case add slick slider to the block --> (will use slick in responsive only) */ } .News-component .view-content .views-row { background-color: var(--bgcolor-block); border-radius: var(--border-radius-default); padding: 1.5rem; flex: 0 0 100%; margin: 0; } .News-component .view-content .views-row .views-row--inn { height: 100%; align-content: space-between; } .News-component .view-content .views-row .views-row--inn .news-title { flex: 0 0 100%; } .News-component .view-content .views-row .views-row--inn .news-title a { font-size: 16px; justify-content: flex-start; color: var(--color-deanships-blue); } .News-component .view-content .views-row .views-row--inn .news-date { flex: 0 0 100%; color: var(--color-titles); font-size: 10px; letter-spacing: 1px; line-height: 1.6rem; } .News-component .view-content .views-row .views-row--inn .news-content { flex: 0 0 100%; display: flex; flex-wrap: nowrap; } .News-component .view-content .views-row .views-row--inn .news-content .news-image { display: flex; max-width: 200px; max-height: 90px; } .News-component .view-content .views-row .views-row--inn .news-content .news-image img { width: 100%; height: 100%; padding-inline-end: 10px; } .News-component .view-content .views-row .views-row--inn .news-content .news-body { flex: 1; color: var(--color-text-gray); font-size: 14px; font-weight: 300; margin-block: 0; font-size: 12px; } .News-component .view-content .views-row .views-row--inn .news-cta { display: flex; justify-content: flex-end; flex: 0 0 100%; } .News-component .attachment, .News-component .view-content { flex: 0 0 calc(50% - 8px); } .News-component.slick-component .slick-track, .News-component.slick-component .slick-track .slick-slide, .News-component.slick-component .slick-track .slick-slide > div, .News-component.slick-component .slick-track .slick-slide > div .views-row, .News-component.slick-component .slick-track .slick-slide > div .views-row .views-field.views-field-nothing { height: 95% !important; } .News-component.slick-component .slick-track { width: 100% !important; } .Related_news { background-color: var(--bgcolor-block); padding-block: 30px; padding-block-end: 60px; } .Related_news > div { max-width: 1170px; margin: 0 auto; } .Related-news.News-component .view-content { flex: 0 0 100%; } .Related-news.News-component .view-content .views-row { background-color: var(--color-main); flex: 0 0 calc(50% - 15px); } .Announcements-and-Events-component { max-width: 1170px; margin: 0 auto; } .Announcements-and-Events-component .view-content { align-items: stretch; /* Start: This style will add just in case add slick slider to the block --> (will use slick in responsive only) */ } .Announcements-and-Events-component .view-content .views-row { flex: 0 0 calc(50% - 1rem); background-color: var(--bgcolor-block); background-color: var(--color-main); margin-block: 1rem 0.5rem; border-radius: var(--border-radius-default); padding: 1.5rem; } .Announcements-and-Events-component .view-content .views-row .views-row--inn { flex-wrap: nowrap !important; justify-content: space-between; align-items: stretch; min-height: 150px; } .Announcements-and-Events-component .view-content .views-row .views-row--inn .date-status { flex: 0 0 18%; justify-content: center; align-items: center; color: var(--color-main); display: flex; height: 18%; padding-block-start: 5px; } .Announcements-and-Events-component .view-content .views-row .views-row--inn .date-status.soon { background-color: var(--color-event-red); } .Announcements-and-Events-component .view-content .views-row .views-row--inn .date-status.open, .Announcements-and-Events-component .view-content .views-row .views-row--inn .date-status.now { background-color: var(--color-event-green); } .Announcements-and-Events-component .view-content .views-row .views-row--inn .date-status.close { background-color: var(--color-event-black); } .Announcements-and-Events-component .view-content .views-row .views-row--inn .date-status a { color: var(--color-main); font-weight: 100; } .Announcements-and-Events-component .view-content .views-row .views-row--inn .Announcements-and-Events-date { display: flex; flex-direction: column; justify-content: space-between; flex: 0 0 20%; margin-inline-end: 30px; flex-basis: 115px; min-height: 150px; max-height: 150px; } .Announcements-and-Events-component .view-content .views-row .views-row--inn .Announcements-and-Events-date .date-status { background-color: var(--color-event-green); } .Announcements-and-Events-component .view-content .views-row .views-row--inn .Announcements-and-Events-date .date-status.soon { background-color: var(--color-event-red); } .Announcements-and-Events-component .view-content .views-row .views-row--inn .Announcements-and-Events-date .date-status.open, .Announcements-and-Events-component .view-content .views-row .views-row--inn .Announcements-and-Events-date .date-status.now { background-color: var(--color-event-green); } .Announcements-and-Events-component .view-content .views-row .views-row--inn .Announcements-and-Events-date .date-status.closed { background-color: var(--color-event-black); } .Announcements-and-Events-component .view-content .views-row .views-row--inn .Announcements-and-Events-date .date { display: flex; flex-direction: column; flex: 1; justify-content: center; align-items: center; background-color: var(--color-light3); font-size: 22px; padding-block-start: 5px; } .Announcements-and-Events-component .view-content .views-row .views-row--inn .Announcements-and-Events-date .date .date-day { display: flex; font-weight: 800; } .Announcements-and-Events-component .view-content .views-row .views-row--inn .Announcements-and-Events-date .date .date-month { font-weight: lighter; margin-block-start: -10px; } .Announcements-and-Events-component .view-content .views-row .views-row--inn .Announcements-and-Events-date .date-time { background-color: var(--color-event-gray); flex: 0 0 18%; display: flex; justify-content: center; align-items: center; color: var(--color-main); font-weight: lighter; font-size: 16px; height: 18%; padding-block-start: 5px; } .Announcements-and-Events-component .view-content .views-row .views-row--inn .Announcements-and-Events-image { flex: 0 0 20%; align-items: stretch; margin-inline-end: 30px; flex-basis: 115px; max-height: 150px; } .Announcements-and-Events-component .view-content .views-row .views-row--inn .Announcements-and-Events-image img { width: 100%; height: 100%; object-fit: cover; } .Announcements-and-Events-component .view-content .views-row .views-row--inn .Announcements-and-Events-content { flex-grow: 1; margin-inline-end: 30px; align-items: flex-start; display: flex; flex-direction: column; justify-content: center; } .Announcements-and-Events-component .view-content .views-row .views-row--inn .Announcements-and-Events-content .Announcements-and-Events-title a { color: var(--color-titles); font-size: 20px; width: 100%; display: flex; padding: 0; margin: 0; justify-content: center; } .Announcements-and-Events-component .view-content .views-row .views-row--inn .Announcements-and-Events-content .Announcements-and-Events-title a:hover { text-decoration: none; } .Announcements-and-Events-component .view-content .views-row .views-row--inn .Announcements-and-Events-content .Announcements-and-Events-title a { color: var(--color-deanships-blue); } .Announcements-and-Events-component .view-content .views-row .views-row--inn .Announcements-and-Events-content .Announcements-and-Events-body { font-size: 12px; } .Announcements-and-Events-component .view-content .views-row .views-row--inn .Announcements-and-Events-link { flex-basis: 40%; display: flex; justify-content: flex-end; align-items: flex-end; } .Announcements-and-Events-component.slick-component .slick-track, .Announcements-and-Events-component.slick-component .slick-track .slick-slide, .Announcements-and-Events-component.slick-component .slick-track .slick-slide > div, .Announcements-and-Events-component.slick-component .slick-track .slick-slide > div .views-row, .Announcements-and-Events-component.slick-component .slick-track .slick-slide > div .views-row .views-field.views-field-nothing { height: 95% !important; } .Announcements-and-Events-component.slick-component .slick-track { width: 100% !important; } .Statistics-component .view-content { align-items: center; } .Statistics-component .view-content.slick-initialized .slick-list .slick-track .slick-slide { height: 200px; } .Statistics-component .view-content.slick-initialized .slick-list .slick-track .slick-slide > div .views-row { padding: 0 !important; margin: 0 !important; display: flex !important; } .Statistics-component .view-content .views-row { flex: 0 0 calc(20% - 30px); align-items: center; align-self: center; align-content: center; justify-content: center; border-radius: var(--border-radius-default); border: 1px solid var(--color-deanships-blue); display: flex; flex-direction: column; margin-top: 15px; margin-bottom: 15px; margin-inline-end: 15px; margin-inline-start: 0; height: 145px; width: 145px; } .Statistics-component .view-content .views-row .fontawesome-icon { padding-top: 10px; } .Statistics-component .view-content .views-row .fontawesome-icon i { font-size: 42px; color: var(--color-green); color: rgba(28, 102, 149, 0.3); -webkit-text-stroke: 1px var(--color-deanships-blue); } .Statistics-component .view-content .views-row .fontawesome-icon i.fad:before { color: var(--color-green) !important; } .Statistics-component .view-content .views-row .fontawesome-icon i.fad:after { color: #707070 !important; } .Statistics-component .view-content .views-row .views-field { color: var(--color-text-gray); } .Statistics-component .view-content .views-row .views-field-field-statistics-value { font-size: 32px; font-weight: bold; display: flex; align-items: flex-end; color: var(--color-deanships-blue); } .Statistics-component .view-content .views-row .views-field-title { margin-block-start: 0.1rem; color: var(--color-deanships-gray); } .Statistics-component .view-content .views-row .views-field-title .field-content { font-weight: 400; width: 100%; display: flex; text-align: center; line-height: 19px; font-size: 18px; } .Statistics-component.slick-component .slick-track { width: 100% !important; column-gap: 55px !important; } .Success-Story-component .view-header .icon-header { font-weight: bold; } .Success-Story-component .view-content .views-row--inn { display: flex; width: 80%; justify-content: center; column-gap: 30px; } .Success-Story-component .view-content .views-row--inn .success-story-image { flex: 0 0 30%; width: 250px; height: auto; } .Success-Story-component .view-content .views-row--inn .success-story-image img { width: 100%; height: 100%; border-radius: var(--border-radius-default); } .Success-Story-component .view-content .views-row--inn .success-story-content { flex: 1; align-self: center; padding-inline-end: 30px; display: flex; flex-flow: row wrap; justify-content: flex-start; row-gap: 15px; } .Success-Story-component .view-content .views-row--inn .success-story-content .success-story-title a { justify-content: flex-start; color: var(--color-deanships-blue); } .Success-Story-component .view-content .views-row--inn .sucess-story-view-node { flex: 0 0 15%; display: flex; justify-content: flex-end; align-items: center; } .Success-Story-component .view-content span.field-content { display: flex; justify-content: space-evenly; } .Reports-component { max-width: 1170px; margin: 0 auto; margin-block-end: 30px; } .Reports-component .view-content { margin-block-start: 30px; } .Reports-component .view-content .views-row { flex: 0 0 calc(33.3333333333% - 1rem); } .Reports-component .view-content .views-row .views-row--inn .Report_image { flex: 0 0 45%; } .Reports-component .view-content .views-row .views-row--inn .Report_image img { max-width: 150px; max-height: 95px; border-radius: var(--border-radius-default); margin-inline-end: 25px; } .Reports-component .view-content .views-row .views-row--inn .Report_body { flex: 0 0 50%; } .Reports-component .view-content .views-row .views-row--inn .Report_body .Report_title { font-weight: 500; margin-block-end: 30px; color: var(--color-titles); } .Reports-component .view-content .views-row .views-row--inn .Report_body .Report_file { text-align: center; } .Reports-component .view-content .views-row .views-row--inn .Report_body .Report_file.download_btn a:hover { text-decoration: none; } .Reports-component.slick-component .slick-slider { min-height: 150px; } .Reports-component.slick-component .slick-slider .slick-track { width: 100% !important; } .Reports-component.slick-component .slick-slider .slick-track .slick-slide.views-row { width: 100% !important; } .Departements-component .view-header .title-section, .Departements-component .view-header .paragraph--type--more-description .field--name-field-title, .paragraph--type--more-description .Departements-component .view-header .field--name-field-title, .Departements-component .paragraph--type--more-description .Colleges-component .view-header .view-header--inn .field--name-field-title, .Departements-component .Colleges-component .view-header .view-header--inn .title-section, .Colleges-component .Departements-component .view-header .view-header--inn .title-section, .Departements-component .view-header .icon-header i { color: var(--color-main) !important; } .Departements-component .view-content { height: fit-content; } .Departements-component .view-content.slick-initialized .slick-list .slick-track .slick-slide { height: fit-content; } .Departements-component .view-content .views-row { flex: 0 0 24%; width: 24%; height: 100%; background-color: rgba(28, 102, 149, 0.8); margin-bottom: 20px; border-radius: var(--border-radius-default); } .Departements-component .view-content .views-row .views-field-field-icon img { height: 140px; width: 100%; border-radius: var(--border-radius-default); } .Departements-component .view-content .views-row .views-field-title { min-height: 100px; margin: auto 30px; display: flex; } .Departements-component .view-content .views-row .views-field-title a { font-weight: 500; color: var(--color-main) !important; } .Departements-component .view-content .views-row .views-field-title a { color: var(--color-titles); font-size: 20px; width: 100%; display: flex; padding: 0; margin: 0; justify-content: center; } .Departements-component .view-content .views-row .views-field-title a:hover { text-decoration: none; } .Departements-component .view-content .views-row .field-content { justify-self: center; align-self: center; text-align: center; justify-content: center; width: 100%; } .Departements-component .slick-track { width: 100% !important; } .Departements-component .slick-track .slick-slide.views-row { flex: 0 0 calc(25% - 16px); } .hearo-section .slick-track { display: flex; align-items: center; height: 700px !important; } .hearo-section .slick-track .slick-slide.slick-current { justify-content: center; } .hearo-section .slick-track .slick-slide.slick-current .slider-title, .hearo-section .slick-track .slick-slide.slick-current .slider-description-more { flex: 0 0 100% !important; } .hearo-section .slick-track .slick-slide.slick-current .slider-title { font-size: 42px; color: var(--color-titles); font-weight: 600; flex: 0 0 50%; display: flex; align-items: center; } .hearo-section .slick-track .slick-slide.slick-current .slider-description-more { font-size: 16px; color: var(--color-text-gray); display: flex; flex-direction: column; justify-content: center; } .hearo-section.slick-slider button.slick-prev::before, .hearo-section.slick-slider button.slick-next::before { color: var(--color-main); } .hearo-section iframe { width: 100%; height: 500px; } .hearo-section .media { height: 100% !important; } .hearo-section .media .field--name-field-media-video-file { width: 100%; height: 100%; } .hearo-section video { object-fit: cover; width: 100%; height: 50vh !important; position: relative; top: 0; left: 0; right: 0; margin: 0 auto; text-align: center; display: flex; justify-content: center; } .hearo-section .slider-image-bg { display: flex; justify-content: center; } .hearo-section .slider-image-bg .slider-image-bg-inn { display: flex; justify-content: center; align-items: center; background-size: cover !important; width: 100%; } .hearo-section .slider-image-bg .slider-image-bg-inn > div { align-items: center; height: 100%; } .hearo-section .slider-image-bg .slider-image-bg-inn > div .slider-title, .hearo-section .slider-image-bg .slider-image-bg-inn > div .slider-description p, .hearo-section .slider-image-bg .slider-image-bg-inn > div .slider-more a { color: #fff !important; border-color: #fff !important; font-weight: 500; } .hearo-section .slider-image-bg .slider-image-bg-inn > div.container { --color-deanships-blue-1: rgb(17 75 110 / 60%); height: fit-content; justify-content: space-between !important; flex-flow: row wrap; row-gap: 15px; padding-block: 30px; padding-inline: 30px; border-radius: 30px; } .hearo-section .slider-image-bg .slider-image-bg-inn > div .slider-description p { opacity: 1 !important; font-weight: 100; } .hearo-section .slider-text-inn { display: flex; justify-content: center; align-items: center; height: 100%; } .hearo-section .slider-video { display: flex; width: 100%; height: 100% !important; } .hearo-section .slider-video video { height: 100% !important; } [dir=rtl] .hearo-section .slider-image-bg .slider-image-bg-inn > div, [dir=rtl] .hearo-section .slider-text-inn { direction: rtl; } .hearo-section .slider-title { opacity: 0; } .hearo-section .slider-description { opacity: 0; } .hearo-section .slider-description-more { opacity: 0; } .slick-current .slider-title { animation-duration: 1s; opacity: 1; animation-name: fadeInLeft; animation-duration: 1s; opacity: 1; } .slick-current .slider-description { animation-name: fadeInRight; animation-duration: 1s; opacity: 1; animation-duration: 3s; opacity: 1; } .slick-current .slider-description-more { animation-name: fadeInLeft; animation-duration: 1s; opacity: 1; animation-duration: 2s; opacity: 1; } .Forms-component .view-header--inn .title-section, .Forms-component .view-header--inn .paragraph--type--more-description .field--name-field-title, .paragraph--type--more-description .Forms-component .view-header--inn .field--name-field-title, .Forms-component .paragraph--type--more-description .header-section .view-header--inn .field--name-field-title, .Forms-component .paragraph--type--more-description .Colleges-component .view-header .view-header--inn .field--name-field-title, .Forms-component .Colleges-component .view-header .view-header--inn .title-section, .Colleges-component .view-header .Forms-component .view-header--inn .title-section, .Forms-component .view-header .icon-header i { color: var(--color-main) !important; } .Forms-component .view-content { display: flex; flex-wrap: wrap !important; flex-flow: unset; height: auto; justify-content: space-between; } .Forms-component .view-content .views-row { flex: 0 0 calc(33% - 10px); /* border-radius: var(--border-radius-small); */ display: flex; align-items: center; /* justify-content: center; */ margin-block-end: 10px; display: flex; width: calc(33% - 10px); } .Forms-component .view-content .views-row:hover .views-field-field-form-link a { transform: scale(1.01); font-size: 16px; transition: 0.5s all; box-shadow: 0px 5px 0 0px rgba(0, 0, 0, 0.08); } .Forms-component .view-content .views-row:hover .views-field-field-form-link a:before { margin-inline-end: 9px; transition: 0.5s all; } .Forms-component .view-content .views-row .views-field-field-form-link { width: 100%; } .Forms-component .view-content .views-row .views-field-field-form-link .field-content { display: flex; width: 100%; } .Forms-component .view-content .views-row .views-field-field-form-link:hover { background: transparent; } .Forms-component .view-content .views-row .views-field-field-form-link a { color: var(--color-main); font-weight: 100; text-decoration: none; font-size: 16px; font-weight: 300; background: #427e59; width: 100%; padding-inline: 10px; text-align: start; display: flex; justify-content: flex-start; align-items: center; border: var(--border-green); background-color: var(--color-titles-block); color: var(--color-main); padding-top: 27px; padding-bottom: 22px; padding-inline-start: 21px; width: 100%; border-radius: 9px; transition: 0.5s all; } .Forms-component .view-content .views-row .views-field-field-form-link a::before { font-family: "Font Awesome 5 Pro"; content: "\f35d"; margin-inline-end: 10px; margin-block-start: -5px; transition: 0.5s all; } .Forms-component .view-content .views-row .Form-content--icon i::before { font-family: "Font Awesome 5 Pro"; font-style: normal; font-weight: 100; } .Programs-component { max-width: var(--max-width-default); width: 100%; margin: 0 auto; margin: 0 auto; } .Programs-component .view-content { column-gap: 30px; justify-content: space-evenly; } .Programs-component .views-row { flex: 0 0 23.3333333333%; background-color: var(--color-deanships-blue); min-height: 400px; border-radius: var(--border-radius-default); display: flex; margin-block-end: 30px; } .Programs-component .views-row .views-row--inn { height: 100%; padding: 30px; } .Programs-component .views-row .views-row--inn .program-body { color: var(--color-main); font-size: 14px; } .Programs-component .views-row .views-row--inn .program-sub-title { color: #aab2be; padding-inline-start: 12px; width: 100%; display: flex; /* border-bottom: 1px solid; */ /* padding-bottom: 15px; */ margin-bottom: 13px; } .Programs-component .views-row .views-row--inn > .program-title { min-height: 92px; border-bottom: 1px solid #ffffff75; margin-bottom: 14px; flex-direction: column; justify-content: flex-start; align-items: flex-start; align-self: flex-start; margin-bottom: 5px; } .Programs-component .views-row .views-row--inn .program-title { display: flex; align-self: flex-end; flex: 0 0 100%; margin-block-end: 15px; font-weight: 500; } .Programs-component .views-row .views-row--inn .program-title a { text-align: start; color: var(--color-main); } .Programs-component .views-row .views-row--inn .program-cta { display: flex; flex: 0 0 100%; justify-content: center; align-items: center; } .Programs-component.slick-component .slick-track { display: flex; justify-content: space-between; } .Programs-component .views-row--inn { flex-flow: unset !important; flex-direction: column !important; height: 90% !important; max-width: 100% !important; justify-content: space-between !important; text-align: start; padding-bottom: 0 !important; align-items: flex-start; flex-wrap: wrap; } .Programs-component .views-row--inn .program-title { align-self: flex-start !important; width: 100%; min-height: 92px; border-bottom: 1px solid #ffffff75; margin-bottom: 14px; flex-direction: column; justify-content: flex-start; align-items: flex-start; align-self: flex-start; margin-bottom: 5px; flex: 0 0 20% !important; } .Programs-component .views-row--inn .program-cta { flex: 0 0 10% !important; } .node__content .field__item .field__item { height: 100%; } .paragraph--type--location { max-width: 1170px; margin: 0 auto; padding-block: 60px; } .paragraph--type--location .field--name-field-description .field__label { font-size: 24px; color: var(--color-titles); text-align: start; } .paragraph--type--location .field--name-field-description .field__item iframe { width: 100%; height: 300px !important; border-radius: 4px; border: 1px #e6e6e6 solid !important; } .paragraph--type--more-description { max-width: 1170px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; padding-block: 60px; } .paragraph--type--more-description .field--name-field-title { flex: 0 0 25%; display: flex; justify-content: flex-start; align-items: center; height: 100% !important; } .paragraph--type--more-description .field--name-field-description { flex: 0 0 50%; } .paragraph--type--more-description .field--name-field-more { flex: 0 0 25%; display: flex; justify-content: flex-end; } .social-container { padding-block: 60px; } .social-container .social-item { position: relative; } .social-container .social-item:hover a i { margin-inline: 30px; color: inherit; transform: rotate(360deg) scale(1.2); transition: 0.8s; text-shadow: 0px 1px 0 #bdbdbd !important; } .social-container .social-item:hover a i.fa-twitter, .social-container .social-item:hover a i.fa-twitter-square { color: #1d9bf0; } .social-container .social-item:hover a i.fa-facebook, .social-container .social-item:hover a i.fa-facebook-square, .social-container .social-item:hover a i.fa-facebook-f { color: #057ae9; } .social-container .social-item:hover a i.fa-instagram, .social-container .social-item:hover a i.fa-instagram-square { color: #da2e76; } .social-container .social-item:hover a i.fa-youtube, .social-container .social-item:hover a i.fa-youtube-square { color: #ff0100; } .social-container .social-item:hover a i.fa-snapchat, .social-container .social-item:hover a i.fa-snapchat-ghost { color: #fffc00; } .social-container .social-item:nth-child(1) a:after { width: 0; } .social-container .social-item a i { font-size: 40px; margin-inline: 30px; color: var(--color-icon); } .paragraph-advanced { background: var(--bgcolor-block); margin-bottom: 30px !important; padding-block: 30px; } .paragraph-advanced .paragraph-advanced-item { width: 100%; } .basic-with-image { flex-direction: column; } .basic-with-image .basic-with-image-image img { max-width: 100%; height: auto; } .paragraph-lists { width: 100%; display: flex; flex-direction: column; background: var(--bgcolor-block); } .paragraph-lists .paragraph-list-title { margin-top: 20px; } .paragraph-lists .paragraph-list { padding-bottom: 0 !important; margin-bottom: 0; } .paragraph-lists .paragraph-list .paragraph-list-description { width: 100%; display: flex; flex-wrap: wrap; padding-block-end: 0px !important; } .paragraph-lists .paragraph-list .paragraph-list-description:last-child { padding-block-end: 40px !important; } .paragraph-lists .paragraph-list-inn { width: 100%; display: flex; flex-direction: column; flex: 0 0 100%; background: var(--bgcolor-block); } .paragraph-lists .paragraph-list-inn ol { width: calc(100% - 60px); display: flex; flex-direction: column; margin-bottom: 0 !important; padding-bottom: 0px; } .paragraph-lists .paragraph-list-inn ol li { background: var(--color-main) !important; padding: 20px; margin-bottom: 20px; list-style-position: inside; border-radius: 20px; line-height: 23px; } .paragraph-lists .paragraph-list-inn ol li:last-child { margin-bottom: 0; } .paragraph-list { width: 100%; display: flex; flex-direction: column; flex: 0 0 100%; background: var(--bgcolor-block); margin-bottom: 30px; } .paragraph-list .paragraph-list-description { width: 100%; display: flex; padding-block: 40px; flex-wrap: wrap; } .paragraph-list ol, .paragraph-list ul { width: calc(100% - 60px); display: flex; flex-direction: column; margin-bottom: 0 !important; padding-bottom: 0px; margin: 0 auto; padding: 0 !important; } .paragraph-list ol li, .paragraph-list ul li { background: var(--color-main) !important; padding: 20px; margin-bottom: 20px; list-style-position: inside; border-radius: 20px; line-height: 23px; } .paragraph-list ol li:last-child, .paragraph-list ul li:last-child { margin-bottom: 0; } .paragraph-table { margin-top: 28px; margin-bottom: 28px; } .paragraph-table .title-section, .paragraph-table .header-section .view-header--inn .title-section, .header-section .view-header--inn .paragraph-table .title-section, .paragraph-table .Colleges-component .view-header .view-header--inn .title-section, .Colleges-component .view-header .view-header--inn .paragraph-table .title-section, .paragraph-table .paragraph--type--more-description .field--name-field-title, .paragraph--type--more-description .paragraph-table .field--name-field-title, .paragraph-table .Colleges-component .view-header .view-header--inn .paragraph--type--more-description .field--name-field-title, .Colleges-component .view-header .view-header--inn .paragraph--type--more-description .paragraph-table .field--name-field-title, .paragraph-table .paragraph--type--more-description .Colleges-component .view-header .view-header--inn .field--name-field-title, .paragraph--type--more-description .Colleges-component .view-header .view-header--inn .paragraph-table .field--name-field-title { max-width: 980px; margin: 0 auto; padding: 0; margin-top: 30px; } .paragraph-table table { border: 1px solid #e2e2e3; width: 100% !important; max-width: 980px; margin: 0 auto; margin-top: 2px; } .paragraph-table table thead th { background: #f9fafb; padding-inline-start: 10px; padding-block: 8px; font-size: 20px; color: #000000cc !important; } .paragraph-table table tbody tr { border-top: 1px solid #e2e2e3; } .paragraph-table table tbody tr td { color: #000000cc !important; padding-inline-start: 10px; padding-block: 8px 2px; font-size: 20px; } .paragraph-table table tbody tr:nth-child(odd) td { background: #ffffff; color: #000000cc !important; } .paragraph-table table tbody tr:nth-child(even) td { background: #fafafb; } .paragraph-advanced-item .paragraph--type--more-description, .paragraph-advanced-item .paragraph--type--image, .paragraph-advanced-item .paragraph-basic { max-width: 980px; margin: 0 auto; } .paragraph-advanced-item .paragraph--type--banner img { max-width: 100%; height: auto; margin: 0 auto; border-radius: 10px; } .page-node-type-page .field--name-body { max-width: 1170px; margin: 0 auto; margin-bottom: 30px; } [dir=rtl] .paragraph-basic-image .float-right { float: left !important; } .Services-component.view-units .view-content .views-row { border: 2px solid #729081; flex: 0 0 calc(25% - 15px); border-radius: 14px; background: transparent; } .Services-component.view-units .view-content .views-row .views-field.views-field-nothing { width: 100%; } .Services-component.view-units .view-content .views-row .views-row--inn { width: 100%; padding-inline: 10px; padding-top: 10px; } .Services-component.view-units .view-content .views-row .views-row--inn .service-image { margin-top: 0px; margin: inherit; } .Services-component.view-units .view-content .views-row .views-row--inn .service-image img { object-fit: unset; display: flex; height: auto; border-radius: 3px; width: 100%; } .Services-component.view-units .view-content .views-row .views-row--inn .service-content .service-body { color: #427e59; } .Services-component--page .service-body p { /* color: #427e59 !important; */ color: var(--color-text-gray); font-size: 14px; font-weight: 300; } .Services-component--page .service-title { color: var(--color-titles) !important; font-size: 20px !important; width: 100%; display: flex; padding: 0; margin: 0; justify-content: flex-start !important; text-align: start !important; } .Services-component--page .service-content { text-align: start !important; } .Services-component--page .service-title a { justify-content: flex-start !important; } .Services-component--page .service-image { margin-top: 0 !important; } .Services-component--page .views-row--inn { margin-bottom: 0 !important; } .Services-component--page .service-cta { margin-bottom: 0px !important; } .Services-component--page .service-category { color: #8a8a8a; } .Services-component--page .service-department { color: #737373 !important; } .Services-component--page.Services-component .view-filters .views-exposed-form .form--inline .form-item select { padding-block-start: 9px; } .Services-component--page.Services-component .service-body p { color: var(--color-text-gray); font-size: 14px; font-weight: 300; } .Services-component--page.Services-component .service-title { color: var(--color-titles) !important; font-size: 20px !important; width: 100%; display: flex; padding: 0; margin: 0; justify-content: flex-start !important; text-align: start !important; } .Services-component--page.Services-component .service-content { text-align: start !important; } .Services-component--page.Services-component .service-title a { justify-content: flex-start !important; } .Services-component--page.Services-component .service-image { margin-top: 0 !important; } .Services-component--page.Services-component .views-row--inn { margin-bottom: 0 !important; } .Services-component--page.Services-component .service-cta { margin-bottom: 0px !important; } .Services-component--page.Services-component .service-category { color: #8a8a8a; } .Services-component--page.Services-component .service-department { color: #737373 !important; } .Services-component--page.Services-component .view-content .views-row .views-row--inn { min-height: auto !important; } .Services-component.Services-component--page.view-units .service-image img { height: 100% !important; object-fit: cover !important; margin-inline-end: 22px !important; } .Services-component.Services-component--page.view-units .service-image { margin-inline-end: 37px !important; } .Services-component.Services-component--page.view-units .view-content .views-row { flex: 0 0 calc(100% - 15px); border: 1px solid #707070; } .Services-component.Services-component--page.view-units .view-content .views-row .views-row--inn { min-height: auto !important; padding-top: 30px; } .Forms-component .view-content { column-gap: 15px; row-gap: 15px; align-items: stretch; } .Forms-component .view-content .views-row { flex: 0 0 calc(25% - 15px); background-color: rgba(28, 102, 149, 0.8); border-radius: 20px; padding-block: 10px; padding-inline: 10px; } .Forms-component .view-content .views-row, .Forms-component .view-content .views-row * { width: 100%; color: white; text-decoration: none; margin-block-end: 0; } .Forms-component .view-content .views-row .Form { display: flex; flex-flow: row wrap; justify-content: space-between; column-gap: 15px; align-items: center; } .Forms-component .view-content .views-row .Form .Form-content--icon { flex: 0 0 5%; } .Forms-component .view-content .views-row .Form .Form-content { flex: 1; } .Forms-component .view-content .views-row .Form .Form-content .Form-content--title { font-weight: 600; font-size: 16px; } .Forms-component .view-content .views-row .Form .Form-type { flex: 0 0 20%; font-size: 12px; background: white; color: var(--color-deanships-blue) !important; text-align: center; padding-block-end: 4px; padding-block-start: 6px; border-radius: 6px; } .Video-component { max-width: 100% !important; } .Video-component .view-content { justify-content: center; margin-block: 30px; } .Video-component .view-content .views-row { width: 100%; height: 100%; flex: 0 0 80%; } .Video-component .view-content .views-row .youtube-container iframe { width: 100%; border-radius: 20px; } .Quotation-Component { max-width: 1200px; width: 100%; margin-inline: auto; padding-block: 60px; } .Quotation-Component .block-title { font-size: 28px; color: var(--color-deanships-blue); text-align: start; font-weight: 600; } .Quotation-Component .block-content { display: flex; flex-flow: row wrap; column-gap: 30px; margin-block: 20px; } .Quotation-Component .block-content--image { flex: 0 0 10%; height: 170px; position: relative; padding-block-end: 30px; } .Quotation-Component .block-content--image img { width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 20px; } .Quotation-Component .block-content--image::after { content: " "; height: 3px; width: 80%; background: var(--color-deanships-blue); position: absolute; display: block; bottom: 0; } .Quotation-Component .block-content--desc { flex: 1; text-align: start; } .Quotation-Component .block-content--desc .desc-title { font-weight: 0; font-size: 22px; color: var(--color-deanships-blue); font-weight: 500; font-weight: 600; margin-block-end: 10px; } .Quotation-Component .block-content--desc .desc-p { padding-inline-start: 15px; color: var(--color-text-gray); font-size: 16px; font-weight: 300; line-height: 1.6em; } .Locations-Component { padding-block: 100px; background-position: top center; background: url("../../images/locations-block-background.png"); background-size: cover; } .Locations-Component .Locations-container, .Locations-Component .view-header { max-width: 1200px; margin-inline: auto; } .Locations-Component .Locations-container, .Locations-Component .view-header .view-header--inn { display: flex; flex-flow: row wrap; } .Locations-Component .Locations-container, .Locations-Component .view-header .view-header--inn .title-section, .Locations-Component .view-header .view-header--inn .paragraph--type--more-description .field--name-field-title, .paragraph--type--more-description .Locations-Component .view-header .view-header--inn .field--name-field-title, .Locations-Component .view-header .paragraph--type--more-description .header-section .view-header--inn .field--name-field-title, .Locations-Component .paragraph--type--more-description .Colleges-component .view-header .view-header--inn .field--name-field-title { flex: 0 0 100%; } .Locations-Component .view-header .view-header--inn::before, .Locations-Component .Location a:before { content: "\f3c5"; font-family: "Font Awesome 5 Pro"; color: var(--color-deanships-blue); font-weight: 600; } .Locations-Component .view-header .view-header--inn::before { font-size: 30px; } .Locations-Component .Locations-container { row-gap: 15px; column-gap: 22px; align-items: center; } .Locations-Component .Locations-container .Location { flex: 0 0 calc(33.3333333333% - 15px); } .Locations-Component .Locations-container .Location a { display: flex; flex-flow: row wrap; column-gap: 15px; align-items: center; text-decoration: none; } .Locations-Component .Locations-container .Location a::before { font-size: 50px; } .Locations-Component .Locations-container .Location .Location-info { flex: 1; display: flex; flex-flow: row wrap; row-gap: 6px; } .Locations-Component .Locations-container .Location .Location-info--name { color: var(--color-deanships-blue); font-size: 20px; font-weight: 600; } .Locations-Component .Locations-container .Location .Location-info--desc { color: var(--color-text-gray); font-size: 12px; } body:not(.path-frontpage) .block-page-title-block { display: flex; justify-content: flex-start; flex: 1; background-color: var(--bgcolor-block); margin-block-end: 70px; padding-block: 10px; } body:not(.path-frontpage) .block-page-title-block .Internal-pages-title { max-width: 80%; width: 100%; margin: 0 auto; } body:not(.path-frontpage) .block-page-title-block .Internal-pages-title .page-title { font-size: 32px; font-weight: 600; color: var(--color-deanships-blue); text-align: start !important; margin-block-start: 15px; } .region.region-content { padding: 0; } .region.region-breadcrumb { display: none; } .pager { display: flex; justify-content: center; align-items: center; } .pager .pagination .page-item a { background-color: white !important; border: none; color: var(--color-text-gray); } .pager .pagination .page-item a:hover, .pager .pagination .page-item a:focus, .pager .pagination .page-item a:active { color: var(--color-deanships-blue); } .pager .pagination .page-item a.page-link:focus { box-shadow: none; outline: none; } .pager .pagination .page-item.is-active a:hover, .pager .pagination .page-item.is-active a:focus, .pager .pagination .page-item.is-active a:active, .pager .pagination .page-item.active a:hover, .pager .pagination .page-item.active a:focus, .pager .pagination .page-item.active a:active { color: var(--color-deanships-blue); } .pager .pagination .page-item.pager__item--next, .pager .pagination .page-item.pager__item--last, .pager .pagination .page-item.pager__item--first, .pager .pagination .page-item.pager__item--previous { display: none; } .Colleges-page { max-width: 1170px; margin: 0 auto; padding-block-end: 70px; } .Colleges-page .main-image, .Colleges-page .main-image > div, .Colleges-page .main-image > div, .Colleges-page .main-image > div > .field--type-image { width: 100%; height: 400px; object-fit: cover; } .Colleges-page .main-image img { width: 100%; height: 100%; object-fit: cover; } .Colleges-page .content .title { margin-block: 30px; } .Colleges-page .content .title h3 { font-size: 28px; color: var(--color-deanships-blue); } .Colleges-page .content .details { display: flex; align-items: center; margin-block-end: 30px; } .Colleges-page .content .details .status { margin-inline-end: 4rem; border-radius: 8px; } .Colleges-page .content .details .status.soon, .Colleges-page .content .details .status.Soon { background-color: var(--color-event-red); } .Colleges-page .content .details .status.open, .Colleges-page .content .details .status.now, .Colleges-page .content .details .status.Open, .Colleges-page .content .details .status.Now { background-color: var(--color-event-green); } .Colleges-page .content .details .status.close, .Colleges-page .content .details .status.Close, .Colleges-page .content .details .status.closed { background-color: var(--color-event-black); } .Colleges-page .content .details .status .field { display: flex; border-radius: 8px; width: 6rem; height: 2rem; justify-content: center; align-items: center; color: var(--color-main); padding-block-start: 5px; } .Colleges-page .content .details .date-and-location .date { margin-block-end: unset !important; flex: 0 0 100%; } .Colleges-page .content .details .date-and-location .date .datetime { display: flex; justify-content: center; align-items: center; } .Colleges-page .content .details .date-and-location .date .datetime:before { content: "\f073"; font-family: "Font Awesome 5 Pro"; padding-inline-end: 15px; font-size: 24px; margin-block-start: -8px; } .Colleges-page .content .details .date-and-location .location { color: var(--color-deanships-blue); letter-spacing: 1px; word-spacing: 5px; font-size: 16px; font-weight: 400; } .Colleges-page .content .details .date-and-location .location .field { display: flex; align-items: center; } .Colleges-page .content .details .date-and-location .location .field:before { content: "\f3c5"; font-family: "Font Awesome 5 Pro"; margin-inline-end: 20px; margin-block-start: -5px; font-size: 24px; } .Colleges-page .content .body { color: var(--color-text-gray); font-size: 16px; font-weight: 300; margin-block-end: 30px; } .Colleges-page .content .date { color: var(--color-deanships-blue); letter-spacing: 1px; word-spacing: 5px; font-size: 16px; font-weight: 400; margin-block-end: 30px; display: flex; align-items: center; } .Colleges-page .content .photos-gallary { margin-block-end: 90px; } .Colleges-page .content .photos-gallary .field { display: flex; flex-flow: row wrap; } .Colleges-page .content .photos-gallary .field .field__item { flex: 0 0 200px; margin-inline-end: 30px; margin-block-end: 15px; max-height: 200px; } .Colleges-page .content .photos-gallary .field .field__item img { width: 100%; height: 100%; } .Colleges-page .content .department, .Colleges-page .content .tags { margin-block-end: 30px; } .Colleges-page .content .department .field, .Colleges-page .content .tags .field { display: flex; flex-flow: row wrap; justify-content: flex-start; } .Colleges-page .content .department .field .field__label, .Colleges-page .content .tags .field .field__label { font-weight: 300; font-size: 22px; flex: 0 0 100%; color: var(--color-deanships-blue); margin-block-end: 15px; } .Colleges-page .content .department .field .field__items, .Colleges-page .content .tags .field .field__items { display: flex; justify-content: flex-start; } .Colleges-page .content .department .field .field__item, .Colleges-page .content .tags .field .field__item { margin-inline-end: 20px; background-color: var(--bgcolor-block); display: flex; align-items: center; padding: 10px; border-radius: 10px; width: fit-content; } .Colleges-page .content .department .field .field__item a, .Colleges-page .content .tags .field .field__item a { color: var(--color-text-gray); padding-block-start: 5px; } .Colleges-page .content .category { margin-block-end: 30px; } .Colleges-page .content .category .field { display: flex; flex-direction: column; justify-content: flex-start; } .Colleges-page .content .category .field .field__label { font-weight: 300; font-size: 22px; flex: 0 0 100%; color: var(--color-deanships-blue); margin-block-end: 15px; } .Colleges-page .content .category .field .field__items { display: flex; justify-content: flex-start; } .Colleges-page .content .category .field .field__item { margin-inline-end: 20px; background-color: var(--color-deanships-blue); display: flex; align-items: center; padding: 10px; border-radius: 10px; } .Colleges-page .content .category .field .field__item a { color: var(--bgcolor-block); font-size: 14px; padding-block-start: 5px; } .Colleges-page .content .source { margin-block-end: 15px; } .Colleges-page .content .source .field { display: flex; font-size: 20px; font-weight: bolder; color: var(--color-text-gray); } .News-component--page { max-width: 1170px; margin: 0 auto; } .News-component--page .view-content .views-row { flex: 0 0 100%; background-color: var(--bgcolor-block); } .News-component--page .view-content .views-row .views-row--inn .news-title { flex: 0 0 50%; } .News-component--page .view-content .views-row .views-row--inn .news-date { flex: 0 0 30%; justify-self: center; display: flex; justify-content: center; align-items: center; align-content: center; } .News-component--page .view-content .views-row .views-row--inn .news-cta { flex: 0 0 20%; } .Services-component--page { max-width: 1170px; margin: 0 auto; } .Services-component--page .view-content .views-row { width: 100%; flex: 0 0 100%; background-color: var(--bgcolor-block); } .Services-component--page .view-content .views-row .views-row--inn { justify-content: stretch; align-items: stretch; width: 100%; flex-flow: row wrap !important; } .Services-component--page .view-content .views-row .views-row--inn .service-image { margin-inline-end: 30px; flex: 0 0 20%; max-height: 200px; } .Services-component--page .view-content .views-row .views-row--inn .service-image img { height: 100%; width: 100%; } .Services-component--page .view-content .views-row .views-row--inn .service-content { flex-basis: 50%; } .Services-component--page .view-content .views-row .views-row--inn .service-cta { align-items: flex-end; } .Announcements-and-Events-component--page { max-width: 1170px; margin: 0 auto; } .Announcements-and-Events-component--page .view-content .views-row { flex-basis: 100%; background-color: var(--bgcolor-block); } .Announcements-and-Events-component--page .view-content .views-row .views-row--inn .Announcements-and-Events-date { flex-basis: 115px; } .Announcements-and-Events-component--page .view-content .views-row .views-row--inn .Announcements-and-Events-location { display: flex; justify-content: center; align-items: center; flex-basis: 50%; color: var(--color-deanships-blue); font-size: 16px; } .Announcements-and-Events-component--page .view-content .views-row .views-row--inn .Announcements-and-Events-location:before { content: "\f3c5"; font-family: "Font Awesome 5 Pro"; font-weight: 600; color: var(--color-deanships-blue); font-size: 18px; margin-inline-end: 15px; } .Announcements-and-Events-component--page .view-content .views-row .views-row--inn .Announcements-and-Events-link { flex-basis: 10%; } .page-node-type-announcements-events .node__content .Annoucements-and-events-content .Annoucements-and-events-details .Annoucements-and-events-date-and-location { padding-block-start: 10px; } /* ---------------------------------------- ------ START: Success Story pages ----- ---------------------------------------- */ .path-success-story .block-block-content#block-successstory { position: relative; max-width: 1170px; margin: 0 auto; color: var(--color-main); margin-block-end: 30px; } .path-success-story .block-block-content#block-successstory .field--name-field-success-story-background { height: 400px; position: relative; } .path-success-story .block-block-content#block-successstory .field--name-field-success-story-background::before { content: ""; position: absolute; z-index: 0; background-color: #42526ed6; width: 100%; height: 100%; border-radius: 20px; } .path-success-story .block-block-content#block-successstory .field--name-field-success-story-background img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; } .path-success-story .block-block-content#block-successstory .field--name-field-title, .path-success-story .block-block-content#block-successstory .field--name-body, .path-success-story .block-block-content#block-successstory .field--name-field-success-story-name { position: absolute; text-align: center; width: 100%; font-size: 22px; } .path-success-story .block-block-content#block-successstory .field--name-field-title { position: absolute; top: 20%; font-size: 32px; font-weight: 700; } .path-success-story .block-block-content#block-successstory .field--name-body { position: absolute; top: 35%; padding-inline: 60px; } .path-success-story .block-block-content#block-successstory .field--name-field-success-story-name { font-weight: 700; bottom: 20%; } .Success-Story-component--page .view-content .views-row { width: 100%; } .Success-Story-component--page .view-content .views-row .views-row--inn { margin-block-end: 30px; background-color: var(--bgcolor-block); border-radius: 20px; justify-content: space-between; width: 100%; } .Success-Story-component--page .view-content .views-row .views-row--inn .success-story-image { flex: 0 0 200px; height: 200px; } .Success-Story-component--page .view-content .views-row .views-row--inn .success-story-image img { border-radius: 20px 0px 0px 20px; object-fit: cover; } .Success-Story-component--page .view-content .views-row .views-row--inn .success-story-content { flex: 1; padding-inline: 30px; } .Success-Story-component--page .view-content .views-row .views-row--inn .success-story-content .success-story-title { margin-block-end: 10px; } .Success-Story-component--page .view-content .views-row .views-row--inn .success-story-content .success-story-title a { font-size: 16px; font-weight: 500; } .Success-Story-component--page .view-content .views-row .views-row--inn .success-story-content .success-story-body { font-size: 14px; } .Success-Story-component--page .view-content .views-row .views-row--inn .sucess-story-view-node { justify-content: center; align-items: flex-end; padding-block-end: 30px; flex: 0 0 20%; } .page-node-type-success-story .node__content { display: flex; flex-flow: row wrap; justify-content: space-between; } .page-node-type-success-story .node__content .success-story-main-image { flex-basis: 250px; height: 300px; } .page-node-type-success-story .node__content .success-story-main-image .field--name-field-success-story-image { width: 250px; height: 250px; } .page-node-type-success-story .node__content .success-story-main-image .field--name-field-success-story-image img { border-radius: 20px; } .page-node-type-success-story .node__content .success-story-content { flex: 0 0 75%; } .page-node-type-success-story .node__content .success-story-content .success-story-title { margin-block-start: 0 !important; } /* ---------------------------------------- --------- START: Webform pages -------- ---------------------------------------- */ .path-webform .webform-submission-form { display: flex; flex-flow: row wrap; max-width: 1170px; margin: 0 auto; justify-content: space-between; } .path-webform .webform-submission-form .js-form-item { flex: 0 0 100%; display: flex; flex-flow: row wrap; align-items: center; } .path-webform .webform-submission-form .js-form-item label { flex: 0 0 20%; margin: 0; font-size: 18px; color: var(--color-deanships-blue); text-align: start; } .path-webform .webform-submission-form .js-form-item label + input { flex: 0 0 80%; border-radius: 8px; border: var(--border-default); color: var(--color-text-gray); font-size: 16px; font-weight: 300; } .path-webform .webform-submission-form .form-composite > legend .fieldset-legend { font-size: 17px; color: var(--color-deanships-blue); display: flex; } .path-webform .webform-submission-form .form-composite .fieldset-wrapper { flex: 0 0 100%; display: flex; justify-content: flex-end; } .path-webform .webform-submission-form .js-webform-checkboxes { flex: 0 0 80%; } .path-webform .webform-submission-form .form-control.form-checkbox, .path-webform .webform-submission-form .form-control.form-radio { border: var(--border-default) !important; margin-inline-end: 15px; } .path-webform .webform-submission-form .form-control:focus { color: var(--color-text-gray); border-color: #42526e; outline: 0; box-shadow: 0 0 0 0.2rem rgba(66, 82, 110, 0.2); } .path-webform .webform-submission-form .form-actions { display: flex; justify-content: flex-end; width: 100%; } .path-webform .webform-submission-form .form-actions .webform-button--submit { border: var(--border-green); background-color: var(--color-titles-block); color: var(--color-main); padding: 0; } .path-webform .webform-submission-form .form-actions .webform-button--submit:hover, .path-webform .webform-submission-form .form-actions .webform-button--submit:focus, .path-webform .webform-submission-form .form-actions .webform-button--submit:active { background-color: var(--color-titles-block) !important; border: none; box-shadow: none !important; } .Forms-component--page { max-width: 1170px; margin: 0 auto; display: flex; flex-wrap: wrap; } .Forms-component--page .view-content { justify-content: space-between; column-gap: unset; } .Forms-component--page .view-content .views-row { flex: 0 0 calc(33.3333333333% - 15px); height: auto; margin-block-end: 30px; padding-block: 15px; padding-inline: 30px; width: 100%; background-color: var(--bgcolor-block); border: none; } .Forms-component--page .view-content .views-row .views-field, .Forms-component--page .view-content .views-row .views-field .views-content, .Forms-component--page .view-content .views-row .views-field .views-content .views-row--inn { width: 100%; justify-content: space-between; } .Forms-component--page .view-content .views-row .views-field .field-content .views-row--inn .Form-content { flex: 1; margin-inline-end: 15px; } .Forms-component--page .view-content .views-row .views-field .field-content .views-row--inn .Form-content .form-title { color: var(--color-deanships-blue); font-size: 14px; font-weight: 600; } .Forms-component--page .view-content .views-row .views-field .field-content .views-row--inn .Form-content .form-body p { font-weight: 300; font-size: 12px; color: var(--color-text-gray); } .Forms-component--page .view-content .views-row .views-field .field-content .views-row--inn .Form-cta { flex: 0 0 30%; display: flex; justify-content: flex-end; align-items: center; } .Forms-component--page .view-content .views-row .views-field .field-content .views-row--inn .Form-cta .form-link a { text-decoration: none; } .page-node-type-departements .field__items > .field__item:nth-child(even) { background-color: var(--bgcolor-block); } .page-node-type-departements .field__items > .field__item { padding-block: 30px; } .page-node-type-departements .field--name-field-icon, .page-node-type-departements .field--name-body { max-width: 1170px; margin: 0 auto; text-align: start; } .page-node-type-departements .field--name-field-icon { margin-block-end: 30px; object-fit: cover; } .page-node-type-departements .field--name-field-icon img { width: 290px; height: 100%; height: 140px; border-radius: 20px; } .page-node-type-departements .field--name-body { color: var(--color-text-gray); font-weight: 300; font-size: 14px; } .page-node-type-departements .field--name-body .field__label { font-size: 28px; color: var(--color-deanships-blue); } .page-node-type-departements .News-component { margin: 0 auto; max-width: 1170px; } .Taxonomy-component { max-width: 1170px; margin: 0 auto; } .Taxonomy-component .view-content .views-row { flex: 0 0 100%; background-color: var(--bgcolor-block); margin-block: 1rem 0.5rem; border-radius: var(--border-radius-default); padding: 1.5rem; } .Taxonomy-component .view-content .views-row .views-row--inn { height: 100%; align-items: stretch; } .Taxonomy-component .view-content .views-row .views-row--inn .title { flex: 0 0 100%; font-size: 16px !important; color: var(--color-deanships-blue); margin-block-end: 5px; font-weight: 500; } .Taxonomy-component .view-content .views-row .views-row--inn .body { flex: 0 0 85%; color: var(--color-text-gray); } .Taxonomy-component .view-content .views-row .views-row--inn .Taxonomy-cta { flex: 0 0 15%; display: flex; justify-content: center; align-items: center; } .Reports-component--page .view-content .views-row { flex: 0 0 100%; margin-block-end: 30px; background-color: var(--bgcolor-block); padding: 30px; border-radius: var(--border-radius-default); } .Reports-component--page .view-content .views-row .views-row--inn .Report_image { flex: 0 0 10%; } .Reports-component--page .view-content .views-row .views-row--inn .Report_body { flex: 1; display: flex; min-height: 95px; align-items: center; } .Reports-component--page .view-content .views-row .views-row--inn .Report_body .Report_title { flex: 1; } .Reports-component--page .view-content .views-row .views-row--inn .Report_body .Report_file { flex: 0 0 10%; align-items: flex-end; } .Faculty-component--page { max-width: 1170px; width: 100%; margin: 0 auto; } .Faculty-component--page .view-content { justify-content: space-between; column-gap: 0; } .Faculty-component--page .view-content .views-row { flex: 0 0 calc(25% - 30px); margin-block-end: 30px; background-color: var(--bgcolor-block); border-radius: 20px; } .Faculty-component--page .view-content .views-row span.field-content, .Faculty-component--page .view-content .views-row .views-field.views-field-nothing { height: 100%; } .Faculty-component--page .view-content .views-row .views-row--inn { flex-flow: column nowrap !important; justify-content: space-between; height: 100%; padding: 30px; } .Faculty-component--page .view-content .views-row .views-row--inn .faculty-img { flex: 0 0 40%; width: 100%; height: 100px; margin-block-end: 15px; text-align: center; } .Faculty-component--page .view-content .views-row .views-row--inn .faculty-img img { width: 50%; height: 100%; border-radius: 100%; object-fit: cover; } .Faculty-component--page .view-content .views-row .views-row--inn .faculty-details { display: flex; flex-flow: row wrap; flex: 0 0 50%; align-items: stretch; justify-content: center; } .Faculty-component--page .view-content .views-row .views-row--inn .faculty-details--name { margin-block-end: 15px; text-align: center; } .Faculty-component--page .view-content .views-row .views-row--inn .faculty-details--name span { display: block; font-size: 16px; font-weight: 400; color: var(--color-deanships-blue); text-transform: capitalize; } .Faculty-component--page .view-content .views-row .views-row--inn .faculty-details--name-ar { display: none !important; } .Faculty-component--page .view-content .views-row .views-row--inn .faculty-details--rank { border-radius: 20px; flex: 0 0 80%; margin: 0 auto; height: 40px; display: flex; justify-content: center; align-items: center; margin-block-end: 10px; font-size: 16px; font-weight: bold; color: var(--color-deanships-blue); padding-block-start: 3px; } .Faculty-component--page .view-content .views-row .views-row--inn .faculty-details--email { flex: 0 0 100%; } .Faculty-component--page .view-content .views-row .views-row--inn .faculty-details--email a { text-decoration: none; font-size: 16px; color: var(--color-text-gray); display: flex; align-items: center; justify-content: center; } .Faculty-component--page .view-content .views-row .views-row--inn .faculty-details--email a .icon i { text-decoration: none; color: var(--color-text-gray); height: fit-content; padding-inline-end: 15px; font-size: 20px; font-weight: bold; } .path-user div#block-kkucolleges-local-tasks { max-width: 1200px; margin: 0 auto; } .path-user div#block-kkucolleges-local-tasks .nav-tabs { border-bottom: none; height: 60px; border: none; } .path-user div#block-kkucolleges-local-tasks .nav-tabs:hover, .path-user div#block-kkucolleges-local-tasks .nav-tabs:focus { border: none !important; } .path-user div#block-kkucolleges-local-tasks .nav-tabs .nav-item { flex: 0 0 33.3333333333% !important; display: flex; justify-content: center; align-items: center; background-color: var(--bgcolor-block); border-radius: 0; border-inline: 0.5px solid white; transition: all 0.3s ease-in-out; } .path-user div#block-kkucolleges-local-tasks .nav-tabs .nav-item:hover { background-color: #427e59; } .path-user div#block-kkucolleges-local-tasks .nav-tabs .nav-item:hover a { color: white !important; } .path-user div#block-kkucolleges-local-tasks .nav-tabs .nav-item.active { border: 0; background-color: #427e59; border-radius: 0; transition: all 0.3s ease-in-out; } .path-user div#block-kkucolleges-local-tasks .nav-tabs .nav-item.active:hover { background-color: #427e59; opacity: 0.8; } .path-user div#block-kkucolleges-local-tasks .nav-tabs .nav-item.active a { color: white !important; text-decoration: none; } .path-user div#block-kkucolleges-local-tasks .nav-tabs .nav-item a { color: var(--color-deanships-blue); } .path-user div#block-kkucolleges-local-tasks .nav-tabs .nav-link:hover, .path-user div#block-kkucolleges-local-tasks .nav-tabs .nav-link:focus { border: none !important; } .path-user div#block-kkucolleges-content { max-width: 600px; margin: 0 auto; } .path-user div#block-kkucolleges-content .user-login-form { padding-block: 60px; } .path-user div#block-kkucolleges-content form.user-pass p { flex: 0 0 100%; display: flex; justify-content: flex-end; color: var(--color-text-gray); margin-block-start: 6px; } .path-user div#block-kkucolleges-content .form-item, .path-user div#block-kkucolleges-content .form-actions { display: flex; flex-flow: row wrap; } .path-user div#block-kkucolleges-content .form-item { margin-block: 30px; } .path-user div#block-kkucolleges-content .form-item lable { color: var(--color-deanships-blue); font-weight: 300; display: flex; align-items: center; flex: 0 0 100%; } .path-user div#block-kkucolleges-content .form-item .form-text { height: 44px; flex: 0 0 100%; } .path-user div#block-kkucolleges-content .form-item .description { flex: 0 0 100%; display: flex; justify-content: flex-end; color: var(--color-text-gray); margin-block-start: 6px; } .path-user div#block-kkucolleges-content .form-actions { justify-content: flex-end; margin-block-start: 60px; } .path-user div#block-kkucolleges-content .form-actions input#edit-submit { border: var(--border-green); background-color: var(--color-titles-block); color: var(--color-main); min-width: 8rem; width: max-content; display: flex; } .path-user div#block-kkucolleges-content .form-actions input#edit-submit:hover, .path-user div#block-kkucolleges-content .form-actions input#edit-submit:focus, .path-user div#block-kkucolleges-content .form-actions input#edit-submit:active { background-color: var(--color-titles-block) !important; border: none; box-shadow: none !important; } .path-user div#block-kkucolleges-content a#edit-cas-login-link { display: flex; height: 55px; font-size: 18px; width: 100%; } .path-en div#block-kkucolleges-content { max-width: 1170px; margin: 0 auto; font-size: 26px; color: var(--color-text-gray); font-weight: 200; display: flex; align-items: center; } .path-en div#block-kkucolleges-content::before { content: "\f06a"; font-family: "Font Awesome 5 Pro"; font-size: 75px; margin-inline-end: 15px; color: var(--color-deanships-blue); margin-block-start: -8px; opacity: 0.1; } .path-webform .webform-confirmation { max-width: 1170px; margin: 0 auto; font-size: 24px; font-weight: 100; color: var(--color-text-gray); display: flex; flex-wrap: wrap; } .path-webform .webform-confirmation__message { flex: 0 0 100%; text-align: center; } .path-webform .webform-confirmation__back { text-align: right; flex: 0 0 100%; display: flex; justify-content: center; align-items: center; transition: all 0.3s ease-in-out; width: fit-content; } .path-webform .webform-confirmation__back a { color: var(--color-deanships-blue); } .path-webform .webform-confirmation__back a:hover { text-decoration: none; } .path-webform .webform-confirmation__back:before { content: "\f060"; font-family: "Font Awesome 5 Pro"; margin-inline-end: 15px; margin-block-start: -5px; color: var(--color-deanships-blue); } .path-webform .webform-confirmation__back:hover { opacity: 0.5; } .Colleges-page .content { display: flex; flex-flow: row wrap; } .Colleges-page .content > * { flex: 0 0 100%; } .Colleges-page .content .Service-body.body { border-bottom: 1px solid #dfdfdf; } .Colleges-page .content .Service-department.department { display: flex; float: left; width: 50%; flex: 0 0 100%; } .Colleges-page .content .Service-category.category { display: flex; flex: 0 0 100%; } .Colleges-page .content .field--name-field-services-department { display: flex; flex-direction: row !important; flex-wrap: wrap; } .Colleges-page .content .field--name-field-services-department .field__label { flex: 0 0 100%; } .page-node-type-units .block-page-title-block { margin-bottom: 0px !important; width: 100%; background: #f9f9f9d4 !important; } .page-node-type-units .node__content > .field--name-field-image.field--type-image img { width: 100%; height: auto; } .page-node-type-units .node__content > .field--name-body, .page-node-type-units .node__content > .field--name-field-units-department, .page-node-type-units .node__content > .field--name-field-image.field--type-image { max-width: 1170px; margin: 0 auto; margin-top: 40px; justify-content: flex-start !important; display: flex; flex-direction: column; text-align: start; } .page-node-type-units .node__content > .field--name-field-units-department { margin-bottom: 50px; } .page-node-type-units .node__content > .field--name-field-units-department a { background: #f1f1f1; padding: 20px; margin-top: 10px; display: flex; color: #333; width: max-content; border-radius: 15px; } .page-node-type-departments-programs .node__content { max-width: 1170px; margin: 0 auto; } .page-node-type-departments-programs .node__content .field.field--name-field-sub-title { display: flex; font-size: 22px; margin-bottom: 15px; color: #000; } .page-node-type-departments-programs .node__content .field.field--name-field-department { display: flex; flex-direction: column; justify-content: flex-start !important; text-align: s; } .page-node-type-departments-programs .node__content .field.field--name-field-department .field__label { display: flex; } .page-node-type-departments-programs .node__content .field.field--name-field-department .field__items { display: flex; } .Video-component--page { max-width: 1200px !important; margin-inline: auto; } .Video-component--page .view-content { row-gap: 60px; column-gap: 60px; } .Video-component--page .view-content .views-row { flex: 0 0 calc(25% - 70px); } .Video-component--page .view-content .views-row .youtube-container { margin-block-end: 0; } .Video-component--page .view-content .views-row .youtube-container iframe { height: 200px; } .Video-component--page .view-content .views-row .views-field-title { font-size: 24px; font-weight: 600; color: var(--color-deanships-blue); text-align: start; } /* 0 -> 400px --> (25em) : Small Phones 400px -> 600px --> (37.5em) : Phones 600px -> 900px --> (56.25em): Tablet portrait 900px -> 1200px --> (75em) : Tablet landscape 1800px or larger --> (112.5em):Big desktop screens $breakpoint variable choices: - phone-small - phone - tab-port - tab-land - big-desktop */ @media screen and (max-width: 75em) { .node__content .field--name-field-main-content-blocks > .field__item .field__items { max-width: 90%; } } @media screen and (max-width: 37.5em) { .node__content .field--name-field-main-content-blocks > .field__item .field__items { max-width: 100%; } } @media screen and (max-width: 37.5em) { .views-exposed-form .form--inline { flex-flow: row wrap; } } /* ------------------------- START: Website components ------------------------- */ @media screen and (max-width: 75em) { .Colleges-component { max-width: 90%; } } @media screen and (max-width: 37.5em) { .Colleges-component { max-width: 100%; } } @media screen and (max-width: 37.5em) { .Colleges-component .view-header { padding-inline: 5%; } } @media screen and (max-width: 37.5em) { .Colleges-component .view-header .icon-header { justify-content: center; } } @media screen and (max-width: 37.5em) { .Colleges-component .view-header .view-header--inn { flex-wrap: wrap; justify-content: center; } } @media screen and (max-width: 37.5em) { .Colleges-component .view-header .view-header--inn .title-section, .Colleges-component .view-header .view-header--inn .paragraph--type--more-description .field--name-field-title, .paragraph--type--more-description .Colleges-component .view-header .view-header--inn .field--name-field-title, .Colleges-component .view-header .paragraph--type--more-description .header-section .view-header--inn .field--name-field-title { flex: 0 0 100%; margin-inline-end: 0; text-align: center; } } @media screen and (max-width: 37.5em) { .Colleges-component .view-filters .views-exposed-form .form--inline .form-item, .Colleges-component .view-filters .views-exposed-form .form--inline .form-control { width: 95%; } } @media screen and (max-width: 37.5em) { .Colleges-component .view-filters .views-exposed-form .form--inline .form-item select { width: 95%; } } @media screen and (max-width: 37.5em) { .Colleges-component .view-filters .views-exposed-form .form--inline .form-item.js-form-type-textfield { flex: 0 0 100%; margin-block-end: 0; margin-inline-end: 0; justify-content: center; } } @media screen and (max-width: 37.5em) { .Colleges-component .view-filters .views-exposed-form .form--inline .form-item.js-form-type-select { flex: 0 0 100%; margin-block-end: 0; margin-inline-end: 0; justify-content: center; } } @media screen and (max-width: 37.5em) { .Colleges-component .view-filters .form-actions { margin-inline-start: auto; margin-inline-end: 2.5%; } } @media screen and (max-width: 37.5em) { .Colleges-component .view-content, .Colleges-component .view-content .slick-track { column-gap: 0 !important; } } .Colleges-component .view-content .views-row .views-row--inn { display: flex; flex-flow: row wrap; max-width: 1170px; } @media screen and (max-width: 56.25em) { .hearo-section .slick-track .slick-slide.slick-current { flex-wrap: wrap; } } @media screen and (max-width: 56.25em) { .hearo-section .slick-track .slick-slide.slick-current .slider-title { flex: 0 0 100% !important; max-width: 90%; align-items: flex-end; } } @media screen and (max-width: 37.5em) { .hearo-section .slick-track .slick-slide.slick-current .slider-title { font-size: 36px; } } @media screen and (max-width: 25em) { .hearo-section .slick-track .slick-slide.slick-current .slider-title { font-size: 30px; } } @media screen and (max-width: 56.25em) { .hearo-section .slick-track .slick-slide.slick-current .slider-description-more { flex: 0 0 100% !important; max-width: 90%; justify-content: flex-start; } .hearo-section .slick-track .slick-slide.slick-current .slider-description-more .slider-more { display: flex; justify-content: flex-end; } } @media screen and (max-width: 37.5em) { .hearo-section .slick-track .slick-slide.slick-current .slider-description-more { font-size: 14px; margin-block-start: 10px; } } @media screen and (max-width: 25em) { .hearo-section .slick-track .slick-slide.slick-current .slider-description-more { font-size: 12px; } } @media screen and (max-width: 75em) { .Services-component { margin: 0 auto; max-width: 100%; } } @media screen and (max-width: 75em) { .Services-component .view-content { justify-content: space-between; } } @media screen and (max-width: 56.25em) { .Services-component .view-content { justify-content: center; column-gap: 30px; } } @media screen and (max-width: 75em) { .Services-component .view-content .views-row { width: calc(33.3333333333% - 30px); flex: 0 0 calc(33.3333333333% - 30px); } } @media screen and (max-width: 56.25em) { .Services-component .view-content .views-row { width: calc(50% - 30px); flex: 0 0 calc(50% - 30px); } } @media screen and (max-width: 37.5em) { .Services-component .view-content .views-row { border-radius: 0; flex: 0 0 100%; } } @media screen and (max-width: 37.5em) { .Services-component .view-content .views-row .views-row--inn { padding-inline: 0; padding-block-start: 0; padding: 0; } } @media screen and (max-width: 37.5em) { .Services-component .view-content .views-row .views-row--inn .service-image { flex: 0 0 100%; max-height: 200px; margin-block-end: 30px; } .Services-component .view-content .views-row .views-row--inn .service-image img { width: 100%; height: 100%; } } @media screen and (max-width: 37.5em) { .Services-component .view-content .views-row .views-row--inn .service-content, .Services-component .view-content .views-row .views-row--inn .service-cta { padding-inline: 5%; margin-block-end: 15px; } } @media screen and (max-width: 56.25em) { .Services-component .view-content .views-row .views-row--inn .service-cta { justify-content: flex-end; } } @media screen and (max-width: 75em) { .Services-component.slick-component .slick-list .slick-track { width: 100% !important; column-gap: 23px !important; } } @media screen and (max-width: 37.5em) { .Services-component.slick-component .slick-list .slick-track { width: 100% !important; column-gap: unset !important; } } @media screen and (max-width: 75em) { .Services-component.slick-component .slick-list .slick-track .slick-slide { width: 100% !important; } } @media screen and (max-width: 37.5em) { .Services-component.slick-component .slick-list .slick-track .slick-slide { flex: 0 0 100% !important; } } @media screen and (max-width: 56.25em) { .block-views-blocknews-block-1 > div .News-component { row-gap: 15px; } } @media screen and (max-width: 37.5em) { .block-views-blocknews-block-1 div.attachment .News-component { margin: 0; max-width: 100%; } } @media screen and (max-width: 75em) { .News-component { max-width: 100%; } } @media screen and (max-width: 37.5em) { .News-component { max-width: 90%; width: 100%; margin: 0 auto; } } @media screen and (max-width: 56.25em) { .News-component .attachment, .News-component .view-content { flex: 0 0 100%; } } @media screen and (max-width: 56.25em) { .News-component .view-content .views-row { flex: 100%; } } @media screen and (max-width: 37.5em) { .News-component .view-content .views-row { border-radius: 0; } } @media screen and (max-width: 75em) { .News-component .view-content .views-row .views-row--inn .news-content .news-image { margin-block-end: 10px; } } @media screen and (max-width: 75em) { .News-component .view-content .views-row .views-row--inn .news-content .news-image img:last-of-type { display: none; } } @media screen and (max-width: 37.5em) { .News-component .view-content .views-row .views-row--inn .news-cta { justify-content: flex-end; } } @media screen and (max-width: 75em) { .News-component.slick-component .slick-track, .News-component.slick-component .slick-track .slick-slide, .News-component.slick-component .slick-track .slick-slide > div, .News-component.slick-component .slick-track .slick-slide > div .views-row, .News-component.slick-component .slick-track .slick-slide > div .views-row .views-field.views-field-nothing { height: 95% !important; } } @media screen and (max-width: 75em) { .News-component.slick-component .slick-track { width: 100% !important; } } @media screen and (max-width: 56.25em) { .News-component.slick-component .slick-track { width: fit-content !important; } } @media screen and (max-width: 56.25em) { .News-component.slick-component .slick-track .slick-slide.slick-active { width: 80vw !important; } } @media screen and (max-width: 37.5em) { .News-component.slick-component .slick-track .slick-slide.slick-active { width: 100vw !important; } } @media screen and (max-width: 75em) { .Related_news > div { max-width: 90%; } } @media screen and (max-width: 37.5em) { .Related_news > div { max-width: 100%; } } @media screen and (max-width: 75em) { .Announcements-and-Events-component { max-width: 100%; } } @media screen and (max-width: 75em) { .Announcements-and-Events-component .view-content { justify-content: space-between; } } @media screen and (max-width: 56.25em) { .Announcements-and-Events-component .view-content .views-row { flex: 100%; } } @media screen and (max-width: 37.5em) { .Announcements-and-Events-component .view-content .views-row { border-radius: 0; } } @media screen and (max-width: 75em) { .Announcements-and-Events-component .view-content .views-row > div.views-field { height: 100%; } } @media screen and (max-width: 75em) { .Announcements-and-Events-component .view-content .views-row > div.views-field .views-row--inn { height: 100%; flex-wrap: wrap !important; } } @media screen and (max-width: 37.5em) { .Announcements-and-Events-component .view-content .views-row > div.views-field .views-row--inn { justify-content: center; } } @media screen and (max-width: 37.5em) { .Announcements-and-Events-component .view-content .views-row > div.views-field .views-row--inn .Announcements-and-Events-date { margin-inline-end: 15px; } } @media screen and (max-width: 37.5em) { .Announcements-and-Events-component .view-content .views-row > div.views-field .views-row--inn .Announcements-and-Events-image { margin-inline-end: 15px; } } @media screen and (max-width: 75em) { .Announcements-and-Events-component .view-content .views-row > div.views-field .views-row--inn .Announcements-and-Events-content { justify-content: flex-start; margin-inline-end: 0; flex-flow: row wrap; flex: 1; } } @media screen and (max-width: 37.5em) { .Announcements-and-Events-component .view-content .views-row > div.views-field .views-row--inn .Announcements-and-Events-content { margin-block-start: 15px; flex: 1; margin-block-start: 0; margin-inline-start: 0; } } @media screen and (max-width: 75em) { .Announcements-and-Events-component .view-content .views-row > div.views-field .views-row--inn .Announcements-and-Events-link { flex-basis: 100%; } } @media screen and (max-width: 37.5em) { .Announcements-and-Events-component .view-content .views-row > div.views-field .views-row--inn .Announcements-and-Events-link { align-items: flex-start; justify-content: flex-end; } } @media screen and (max-width: 75em) { .Announcements-and-Events-component.slick-component .slick-track { width: 100% !important; } } @media screen and (max-width: 56.25em) { .Announcements-and-Events-component.slick-component .slick-track { width: fit-content !important; } } @media screen and (max-width: 56.25em) { .Announcements-and-Events-component.slick-component .slick-track .slick-slide.slick-active { width: 80vw !important; } } @media screen and (max-width: 37.5em) { .Announcements-and-Events-component.slick-component .slick-track .slick-slide.slick-active { width: 100vw !important; } } @media screen and (max-width: 75em) { .Statistics-component { margin: 0 auto; } } @media screen and (max-width: 75em) { .Statistics-component .view-content .views-row { flex: 0 0 calc(33.3333333333% - 50px); } } @media screen and (max-width: 56.25em) { .Statistics-component .view-content .views-row { flex: 0 0 calc(50% - 100px); } } @media screen and (max-width: 37.5em) { .Statistics-component .view-content .views-row { flex: 0 0 75%; border: none; margin: unset; } } @media screen and (max-width: 56.25em) { .Statistics-component .view-content .views-row .views-field-field-statistics-value { font-size: 26px; } } @media screen and (max-width: 56.25em) { .Statistics-component .view-content .views-row .views-field-title .field-content { font-size: 20px; } } @media screen and (max-width: 75em) { .Statistics-component .view-content .slick-track { column-gap: 15px !important; justify-content: flex-start; } } @media screen and (max-width: 56.25em) { .Statistics-component .view-content .slick-track { column-gap: 0px !important; } } @media screen and (max-width: 37.5em) { .Statistics-component .view-content .slick-track { column-gap: 15px !important; } } @media screen and (max-width: 56.25em) { .Statistics-component .view-content .slick-track .slick-slide { flex: 0 0 calc(33.3333333333% - 25px) !important; } } @media screen and (max-width: 37.5em) { .Statistics-component .view-content .slick-track .slick-slide { flex: 0 0 calc(50% - 20px) !important; } } @media screen and (max-width: 75em) { .Departements-component { max-width: 100%; } } @media screen and (max-width: 75em) { .Departements-component .view-content { justify-content: center; column-gap: 2%; } } @media screen and (max-width: 56.25em) { .Departements-component .view-content { column-gap: 4%; } } @media screen and (max-width: 75em) { .Departements-component .view-content .views-row { flex: 0 0 27.3333333333%; width: 27.3333333333%; } } @media screen and (max-width: 56.25em) { .Departements-component .view-content .views-row { flex: 0 0 38%; width: 38%; } } @media screen and (max-width: 37.5em) { .Departements-component .view-content .views-row { flex: 0 0 70%; width: 70%; border-radius: 0; } } @media screen and (max-width: 37.5em) { .Departements-component .view-content .views-row .views-field-field-icon img { border-radius: 0; height: 200px; } } .Departements-component .slick-track { width: 100% !important; } @media screen and (max-width: 56.25em) { .Departements-component .slick-track .slick-slide.views-row { flex: 0 0 calc(33.3333333333% - 16px); } } @media screen and (max-width: 37.5em) { .Departements-component .slick-track .slick-slide.views-row { flex: 0 0 100%; } } @media screen and (max-width: 75em) { .Success-Story-component { max-width: 100%; } } @media screen and (max-width: 56.25em) { .Success-Story-component .view-content .views-row--inn { flex-wrap: wrap; align-items: center; } } @media screen and (max-width: 56.25em) { .Success-Story-component .view-content .views-row--inn .success-story-image { flex: 0 0 200px; height: 200px; } } @media screen and (max-width: 56.25em) { .Success-Story-component .view-content .views-row--inn .success-story-content { flex: 1; padding-inline-end: 0; } } @media screen and (max-width: 37.5em) { .Success-Story-component .view-content .views-row--inn .success-story-content { flex: 0 0 100%; margin-block-start: 15px; } } @media screen and (max-width: 56.25em) { .Success-Story-component .view-content .views-row--inn .sucess-story-view-node { flex: 0 0 100%; } } @media screen and (max-width: 37.5em) { .Success-Story-component .view-content .views-row--inn .sucess-story-view-node { justify-content: center; } } @media screen and (max-width: 75em) { .Forms-component { max-width: 100%; } } @media screen and (max-width: 75em) { .Forms-component .view-content .views-row { flex: 0 0 30%; } } @media screen and (max-width: 56.25em) { .Forms-component .view-content .views-row { flex: 0 0 47%; } } @media screen and (max-width: 37.5em) { .Forms-component .view-content .views-row { flex: 0 0 75%; margin-inline: auto; } } @media screen and (max-width: 75em) { .Reports-component .view-content .views-row { flex: 0 0 calc(50% - 1rem); margin-block-end: 30px; } } @media screen and (max-width: 56.25em) { .Reports-component .view-content .views-row { flex: 0 0 100%; } } @media screen and (max-width: 56.25em) { .Reports-component .view-content .views-row .views-row--inn { justify-content: center; } } @media screen and (max-width: 56.25em) { .Reports-component .view-content .views-row .views-row--inn .Report_image { flex: 0 0 10%; } } @media screen and (max-width: 25em) { .Reports-component .view-content .views-row .views-row--inn .Report_image { flex: 0 0 100%; text-align: center; margin-block-end: 15px; } .Reports-component .view-content .views-row .views-row--inn .Report_image img { margin: 0 auto; } } @media screen and (max-width: 37.5em) { .Reports-component .view-content .views-row .views-row--inn .Report_body { padding-inline: 5%; } } @media screen and (max-width: 25em) { .Reports-component .view-content .views-row .views-row--inn .Report_body { flex: 0 0 100%; } } @media screen and (max-width: 25em) { .Reports-component .view-content .views-row .views-row--inn .Report_body .Report_title { margin-block-end: 15px; } } @media screen and (max-width: 25em) { .Reports-component .view-content .views-row .views-row--inn .Report_body .Report_file { margin: 0 auto; } } @media screen and (max-width: 75em) { .Programs-component .views-row { flex: 0 0 30.3333333333%; width: 100% !important; } } @media screen and (max-width: 56.25em) { .Programs-component .views-row { flex: 0 0 44%; width: 100% !important; } } @media screen and (max-width: 37.5em) { .Programs-component .views-row { width: 100% !important; flex: 100% !important; border-radius: 0; } } @media screen and (max-width: 56.25em) { .Programs-component.slick-component .slick-track .slick-slide { flex: 0 0 30%; } } @media screen and (max-width: 75em) { .paragraph--type--more-description { max-width: 90%; } } @media screen and (max-width: 37.5em) { .paragraph--type--more-description .field--name-field-title { flex: 0 0 100%; } } @media screen and (max-width: 56.25em) { .paragraph--type--more-description .field--name-field-description { flex: 0 0 70%; margin: 0 !important; } } @media screen and (max-width: 37.5em) { .paragraph--type--more-description .field--name-field-description { flex: 0 0 100%; margin-block: 30px !important; } } @media screen and (max-width: 56.25em) { .paragraph--type--more-description .field--name-field-more { flex: 0 0 100%; } } @media screen and (max-width: 75em) { .paragraph--type--location { max-width: 90%; } } @media screen and (max-width: 37.5em) { .paragraph--type--location { max-width: 100%; } } @media screen and (max-width: 37.5em) { .paragraph--type--location .field--name-field-description .field__label { padding-inline: 5%; text-align: center; margin-block-end: 15px; } } @media screen and (max-width: 37.5em) { .social-container .social-item a i { margin-inline: 25px; } } /* -------------------- START: Website Pages -------------------- */ @media screen and (max-width: 75em) { body:not(.path-frontpage) .block-page-title-block .Internal-pages-title { max-width: 95%; } } @media screen and (max-width: 75em) { .Colleges-page { max-width: 90%; } } @media screen and (max-width: 37.5em) { .Colleges-page { max-width: 100%; } } @media screen and (max-width: 37.5em) { .Colleges-page .content { padding-inline: 5%; } } @media screen and (max-width: 37.5em) { .Colleges-page .content .title h3 { font-size: 24px; } } @media screen and (max-width: 37.5em) { .Colleges-page .content .details { flex-wrap: wrap; } } @media screen and (max-width: 37.5em) { .Colleges-page .content .details .date-and-location { display: flex; flex-wrap: wrap; margin-block-start: 30px; flex: 0 0 100%; } } @media screen and (max-width: 37.5em) { .Colleges-page .content .body { font-size: 14px; } } @media screen and (max-width: 37.5em) { .Colleges-page .content .photos-gallary .field .field__item { flex: 0 0 100%; margin-inline-end: unset; margin-block-end: 30px; } } /* ---------------------------------------- --------- START: Webform pages -------- ---------------------------------------- */ @media screen and (max-width: 75em) { .path-webform .webform-submission-form { max-width: 90%; } } @media screen and (max-width: 56.25em) { .path-webform .webform-submission-form .js-form-item label { flex: 1; } .path-webform .webform-submission-form .js-form-item label:not(.option) { margin-block-end: 15px; } } @media screen and (max-width: 56.25em) { .path-webform .webform-submission-form .js-form-item label + input { flex: 0 0 100%; margin-block-end: 15px; } } @media screen and (max-width: 56.25em) { .path-webform .webform-submission-form .js-webform-checkboxes { flex: 0 0 100%; } } @media screen and (max-width: 75em) { .News-component--page { max-width: 90%; } } @media screen and (max-width: 37.5em) { .News-component--page .view-content .views-row { border-radius: var(--border-radius-default); } } @media screen and (max-width: 56.25em) { .News-component--page .view-content .views-row .views-row--inn .news-title { flex: 0 0 100%; } } @media screen and (max-width: 56.25em) { .News-component--page .view-content .views-row .views-row--inn .news-date { flex: 0 0 100%; justify-content: flex-start; } } @media screen and (max-width: 56.25em) { .News-component--page .view-content .views-row .views-row--inn .news-cta { flex: 0 0 100%; } } @media screen and (max-width: 56.25em) { .Services-component--page { max-width: 90%; } } @media screen and (max-width: 37.5em) { .Services-component--page { max-width: 100%; } } @media screen and (max-width: 75em) { .Services-component--page .view-content .views-row { width: 100%; flex: 0 0 100%; } } @media screen and (max-width: 37.5em) { .Services-component--page .view-content .views-row { border-radius: 0; margin-block-end: 0; margin-block: 3px; } } @media screen and (max-width: 56.25em) { .Services-component--page .view-content .views-row .views-row--inn { flex-flow: row wrap; } } @media screen and (max-width: 56.25em) { .Services-component--page .view-content .views-row .views-row--inn .service-image { flex: 0 0 30%; } } @media screen and (max-width: 37.5em) { .Services-component--page .view-content .views-row .views-row--inn .service-image { flex: 0 0 100%; } } @media screen and (max-width: 56.25em) { .Services-component--page .view-content .views-row .views-row--inn .service-cta { flex: 0 0 100%; } } @media screen and (max-width: 75em) { .Announcements-and-Events-component--page { max-width: 90%; } } @media screen and (max-width: 37.5em) { .Announcements-and-Events-component--page { max-width: 100%; } } @media screen and (max-width: 37.5em) { .Announcements-and-Events-component--page .view-content .views-row { border-radius: 0; justify-content: flex-start; margin-block: 2px; } } @media screen and (max-width: 75em) { .Announcements-and-Events-component--page .view-content .views-row .views-row--inn .Announcements-and-Events-location { flex-basis: 40%; } } @media screen and (max-width: 56.25em) { .Announcements-and-Events-component--page .view-content .views-row .views-row--inn .Announcements-and-Events-location { flex-basis: 100%; justify-content: flex-start; margin-inline-start: 145px; } } @media screen and (max-width: 37.5em) { .Announcements-and-Events-component--page .view-content .views-row .views-row--inn .Announcements-and-Events-location { margin-inline-start: 0; margin-block-end: 30px; justify-content: flex-start; } } @media screen and (max-width: 37.5em) { .Announcements-and-Events-component--page .view-content .views-row .views-row--inn .Announcements-and-Events-link { justify-content: flex-end !important; } } @media screen and (max-width: 75em) { .Success-Story-component--page { max-width: 90%; margin: 0 auto; } } @media screen and (max-width: 37.5em) { .Success-Story-component--page { max-width: 100%; } } @media screen and (max-width: 56.25em) { .Success-Story-component--page .view-content .views-row .views-row--inn { flex-wrap: wrap; justify-content: center; padding: 30px; } } @media screen and (max-width: 37.5em) { .Success-Story-component--page .view-content .views-row .views-row--inn { border-radius: 0; margin-block-end: 5px; padding: 0; } } @media screen and (max-width: 56.25em) { .Success-Story-component--page .view-content .views-row .views-row--inn .success-story-image { flex: 0 0 200px; margin-inline-end: 0; display: flex; justify-content: center; align-items: center; } } @media screen and (max-width: 37.5em) { .Success-Story-component--page .view-content .views-row .views-row--inn .success-story-image { flex: 0 0 100%; margin-block: 30px; } } @media screen and (max-width: 56.25em) { .Success-Story-component--page .view-content .views-row .views-row--inn .success-story-image img { width: 200px; height: 200px; border-radius: 20px; } } @media screen and (max-width: 37.5em) { .Success-Story-component--page .view-content .views-row .views-row--inn .success-story-image img { border-radius: 10px; } } @media screen and (max-width: 56.25em) { .Success-Story-component--page .view-content .views-row .views-row--inn .success-story-content { margin-block-start: 0; flex: 1; padding-inline-end: 0; text-align: start; } } @media screen and (max-width: 37.5em) { .Success-Story-component--page .view-content .views-row .views-row--inn .success-story-content { padding-inline: 5%; } } @media screen and (max-width: 56.25em) { .Success-Story-component--page .view-content .views-row .views-row--inn .sucess-story-view-node { flex: 0 0 100%; justify-content: flex-end; padding-block-end: 0; } } @media screen and (max-width: 37.5em) { .Success-Story-component--page .view-content .views-row .views-row--inn .sucess-story-view-node { margin-block-end: 30px; padding-inline: 5%; } } @media screen and (max-width: 75em) { .Success-Story-component .view-content .views-row--inn .success-story-image { width: 200px; height: 200px; align-self: center; } } @media screen and (max-width: 37.5em) { .page-node-type-success-story .node__content .success-story-main-image { margin-inline: 5%; height: 230px; } } @media screen and (max-width: 37.5em) { .page-node-type-success-story .node__content .success-story-main-image .field--name-field-success-story-image { width: 200px; height: 200px; } } @media screen and (max-width: 75em) { .page-node-type-success-story .node__content .success-story-content { flex: 0 0 100%; } } @media screen and (max-width: 75em) { .path-success-story .block-block-content#block-successstory { max-width: 90%; } } @media screen and (max-width: 37.5em) { .path-success-story .block-block-content#block-successstory { max-width: 100%; margin-block-end: 10px; } } @media screen and (max-width: 37.5em) { .path-success-story .block-block-content#block-successstory .field--name-field-success-story-background { height: 400px; } } @media screen and (max-width: 37.5em) { .path-success-story .block-block-content#block-successstory .field--name-field-success-story-background::before, .path-success-story .block-block-content#block-successstory .field--name-field-success-story-background img { border-radius: 0; } } @media screen and (max-width: 56.25em) { .path-success-story .block-block-content#block-successstory .field--name-field-title { top: 10%; } } @media screen and (max-width: 37.5em) { .path-success-story .block-block-content#block-successstory .field--name-field-title { top: 5%; font-size: 28px; } } @media screen and (max-width: 56.25em) { .path-success-story .block-block-content#block-successstory .field--name-body { top: 30%; } } @media screen and (max-width: 37.5em) { .path-success-story .block-block-content#block-successstory .field--name-body { top: 20%; font-size: 16px; padding-inline: 30px; } } @media screen and (max-width: 56.25em) { .path-success-story .block-block-content#block-successstory .field--name-field-success-story-name { bottom: 10%; } } @media screen and (max-width: 37.5em) { .path-success-story .block-block-content#block-successstory .field--name-field-success-story-name { bottom: 5%; font-size: 16px; } } @media screen and (max-width: 75em) { .Forms-component--page { max-width: 90%; } } @media screen and (max-width: 75em) { .Forms-component--page .view-content .views-row { flex: 0 0 48%; } } @media screen and (max-width: 37.5em) { .Forms-component--page .view-content .views-row { flex: 0 0 100%; } } @media screen and (max-width: 75em) { .Taxonomy-component .view-content .views-row .views-row--inn .body { flex: 0 0 100%; } } @media screen and (max-width: 75em) { .Taxonomy-component .view-content .views-row .views-row--inn .Taxonomy-cta { justify-content: flex-end; flex: 0 0 100%; } } @media screen and (max-width: 37.5em) { .Taxonomy-component .view-content .views-row .views-row--inn .Taxonomy-cta { justify-content: center; } } @media screen and (max-width: 75em) { .Reports-component--page .view-content .views-row { flex: 0 0 100%; } } @media screen and (max-width: 25em) { .Reports-component--page .view-content .views-row .views-row--inn .Report_image { flex: 0 0 100%; text-align: center; margin-block-end: 15px; } .Reports-component--page .view-content .views-row .views-row--inn .Report_image img { margin-inline-end: 0; } } @media screen and (max-width: 37.5em) { .Reports-component--page .view-content .views-row .views-row--inn .Report_body { flex-wrap: wrap; } } @media screen and (max-width: 25em) { .Reports-component--page .view-content .views-row .views-row--inn .Report_body .Report_title { margin-block-end: 15px; } } @media screen and (max-width: 37.5em) { .Reports-component--page .view-content .views-row .views-row--inn .Report_body .Report_file { flex: 0 0 100%; justify-content: flex-start; } } @media screen and (max-width: 25em) { .Reports-component--page .view-content .views-row .views-row--inn .Report_body .Report_file { justify-content: center; } } @media screen and (max-width: 75em) { .node--type-departements .field--type-image, .node--type-departements .field--name-body { max-width: 90%; margin: 0 auto; } } @media screen and (max-width: 37.5em) { .node--type-departements .field--type-image, .node--type-departements .field--name-body { max-width: 100%; } } @media screen and (max-width: 37.5em) { .node--type-departements .field--name-field-icon { margin-block-end: 30px; } } @media screen and (max-width: 37.5em) { .node--type-departements .field--name-field-icon img { width: 100%; object-fit: cover; height: 300px; border-radius: 0; } } @media screen and (max-width: 37.5em) { .node--type-departements .field--name-body { padding-inline: 5%; } } @media screen and (max-width: 75em) { .node--type-departements .Colleges-component { max-width: 90%; } } @media screen and (max-width: 37.5em) { .node--type-departements .Colleges-component { max-width: 100%; } } @media screen and (max-width: 75em) { .Faculty-component--page .view-content { justify-content: space-around; } } @media screen and (max-width: 75em) { .Faculty-component--page .view-content .views-row { flex: 0 0 calc(33.3333333333% - 30px); } } @media screen and (max-width: 56.25em) { .Faculty-component--page .view-content .views-row { flex: 0 0 calc(50% - 30px); } } @media screen and (max-width: 37.5em) { .Faculty-component--page .view-content .views-row { flex: 0 0 80%; } } @media screen and (max-width: 37.5em) { .Programs-component--page { max-width: 90%; } .Programs-component--page .views-row { border-radius: var(--border-radius-default); } } @media screen and (max-width: 56.25em) { .path-user div#block-kkucolleges-local-tasks a.tab-toggle.dropdown-toggle { display: none; } .path-user div#block-kkucolleges-local-tasks .nav-item a { justify-content: center !important; text-align: center; } } @media screen and (max-width: 37.5em) { .path-user div#block-kkucolleges-local-tasks .nav-item { justify-content: center; text-align: center; } .path-user div#block-kkucolleges-local-tasks .nav-item a { justify-content: center !important; text-align: center; } .path-user div#block-kkucolleges-local-tasks .nav-item .nav-tabs .nav-link.active { justify-content: center; text-align: center !important; } .path-user div#block-kkucolleges-content { max-width: 90%; } } @media screen and (max-width: 75em) { .path-en div#block-kkucolleges-content { max-width: 90%; font-size: 23px; } } @media screen and (max-width: 75em) { .path-webform .webform-confirmation { max-width: 90%; } } @media screen and (max-width: 37.5em) { .Quotation-Component { padding-inline: 30px; display: flex; flex-flow: row wrap; justify-content: center; } } @media screen and (max-width: 56.25em) { .Quotation-Component .block-title { font-size: 26px; } } @media screen and (max-width: 75em) { .Quotation-Component .block-content { column-gap: 20px; } } @media screen and (max-width: 37.5em) { .Quotation-Component .block-content { justify-content: center; row-gap: 30px; } } @media screen and (max-width: 75em) { .Quotation-Component .block-content--image { flex: 0 0 15%; height: 175px; } } @media screen and (max-width: 56.25em) { .Quotation-Component .block-content--image { flex: 0 0 20%; height: 180px; } } @media screen and (max-width: 37.5em) { .Quotation-Component .block-content--image { flex: 0 0 45%; height: 200px; display: flex; flex-flow: row wrap; justify-content: center; } } @media screen and (max-width: 37.5em) { .Quotation-Component .block-content--desc { flex: 0 0 100%; text-align: center; } } @media screen and (max-width: 56.25em) { .Quotation-Component .block-content--desc .desc-title { font-size: 20px; } } @media screen and (max-width: 56.25em) { .Quotation-Component .block-content--desc .desc-p { font-size: 12px; padding-inline-start: 0; } } @media screen and (max-width: 37.5em) { .block-system-branding-block .navbar-brand > div .site-title { font-size: 20px; } } @media screen and (max-width: 56.25em) { .Video-component .view-content .views-row .youtube-container iframe { max-height: 300px; } } @media screen and (max-width: 75em) { .Locations-Component { max-width: 100% !important; } } @media screen and (max-width: 75em) { .Locations-Component .Locations-container, .Locations-Component .view-header { max-width: 90%; margin: 0 auto; } } @media screen and (max-width: 75em) { .Locations-Component .Locations-container .Location { flex: 0 0 calc(50% - 11px); } } @media screen and (max-width: 37.5em) { .Locations-Component .Locations-container .Location { flex: 0 0 100%; } } @media screen and (max-width: 75em) { .Video-component--page { max-width: 90% !important; } } @media screen and (max-width: 75em) { .Video-component--page .view-content { row-gap: 30px; column-gap: 30px; justify-content: space-around; } } @media screen and (max-width: 75em) { .Video-component--page .view-content .views-row { flex: 0 0 calc(25% - 30px); } } @media screen and (max-width: 56.25em) { .Video-component--page .view-content .views-row { flex: 0 0 calc(33.3333333333% - 20px); } } @media screen and (max-width: 37.5em) { .Video-component--page .view-content .views-row { flex: 0 0 calc(50% - 15px); } } @media screen and (max-width: 37.5em) { .Video-component--page .view-content .views-row .views-field-title { font-size: 18px; } }