/* (C) 2019 Endis Ltd. No permission is given to use this code, except on an Endis/ChurchInsight website. ChurchInsight over-ride CSS file for the Centre template. WARNING - do not edit this file unless you know exactly what you are doing. You might consider making a BACKUP COPY before you change anything. If you need advice, contact ChurchInsight Support. */ /* Logo system is COMPLEX! Ask Kenton! */ /* Size of LOGO image */ header .logo-icon img { width: auto !important; height: 80px !important; /* <<< mobile logo height */ background-color:white; padding:5px; border-radius:10px; } @media(min-width:767px){header .logo-icon img { height: 80px !important; /* <<< tablet logo height */ } } @media(min-width:992px){header .logo-icon img { height: 100px !important; /* <<< desktop logo height */ } } @media(min-width:1550px){header .logo-icon img { height: 150px !important; /* <<< desktop logo height */ } } /* Gap between logo and top/bottom of screen */ header div.logo-container { margin-top: 10px !important; /* <<< gap from top for mobile/tablet */ margin-bottom: 0 !important; /* <<< gap from bottom for mobile/tablet */ position:absolute !important;top:0;left:0; } @media (min-width:992px) { header div.logo-container { margin-top: 70px !important; /* <<< gap from top for desktop */ margin-bottom: 0 !important; /* <<< gap from bottom for desktop */ } } @media (min-width:1550px) {header div.logo-container { margin-top: 20px !important; /* <<< gap from top for desktop */ }} /* Logo in scrolled-down smaller tinited header */ header section.slice_Header_T.HeaderTintOn div.logo-container img {height:60px !important;} @media (max-width:991px) { header section.slice_Header_T.HeaderTintOn div.logo-container {margin-top:5px !important;} } @media (min-width:992px) { header section.slice_Header_T.HeaderTintOn div.logo-container { margin-top: 5px !important; /* <<< gap from top for desktop */ } } /* System pages banner image */ section.LargeBlockImageSystemPage { padding:120px 0; } /* ############ Mobile menu colours */ header section.slice_Header_T a.slicknav_btn { background-color: transparent !important; /* <<< colour of the menu bar */ } header section.slice_Header_T a.slicknav_btn.slicknav_open { background-color: #888888 !important; /* <<< colour of the menu bar */ } header section.slice_Header_T .slicknav_icon-bar { background-color: white !important; /* <<< colour of the menu icon */ } header section.slice_Header_T div.SlickNavCloseIcon { color: white !important; /* <<< colour of the menu close icon */ } header section.slice_Header_T div.slicknav_menu ul.slicknav_nav {padding-bottom:10px;border-bottom:1px #888888 solid;} header section.slice_Header_T div.slicknav_menu ul.slicknav_nav a {font-weight:600;} @media (max-width:991px) { header section.slice_Header_T .search-overlay .search-close {top:25px;} } /* ############ Search box background colour */ header div.search-overlay { background-color: #888888 !important; /* <<< Search box background colour */ } header a.search-close { color: white !important; /* <<< Search box close icon */ } /* Social media links */ header div.top-link-wrapper {padding:25px 20px 0 0;} header div.top-link-wrapper img.IconTwitterHover, header div.top-link-wrapper img.IconFacebookHover, header div.top-link-wrapper a.TwitterLink:hover img.IconTwitter, header div.top-link-wrapper a.FacebookLink:hover img.IconFacebook {display:none;} header div.top-link-wrapper a.TwitterLink, header div.top-link-wrapper a.FacebookLink {display:inline-block; width:33px;} header div.top-link-wrapper a.TwitterLink img, header div.top-link-wrapper a.FacebookLink img {margin:0 auto;} header div.top-link-wrapper img.IconTwitter, header div.top-link-wrapper img.IconFacebook, header div.top-link-wrapper a.TwitterLink:hover img.IconTwitterHover, header div.top-link-wrapper a.FacebookLink:hover img.IconFacebookHover {display:block;} header ul.slicknav_nav img.IconTwitter, header ul.slicknav_nav img.IconFacebook {display:none;} header ul.slicknav_nav img.IconTwitterHover, header ul.slicknav_nav img.IconFacebookHover {display:block;} header ul.slicknav_nav a.TwitterLink, header ul.slicknav_nav a.FacebookLink {padding-top:5px !important; padding-bottom:5px !important;} /* Large image blocks */ section.LargeBlockImage1, section.slice_VideoWrapper {padding-top:0 !important; padding-bottom:0 !important;} section.LargeBlockImage2, section.LargeBlockImage3, section.LargeBlockImage4, section.LargeBlockImage5 {height:100vh;padding-top:0 !important; padding-bottom:0 !important;} section.LargeBlockImage2, section.LargeBlockImage3, section.LargeBlockImage4, section.LargeBlockImage5, section.LargeBlockImage1LandingPage, section.LargeBlockImage2LandingPage, section.LargeBlockImageContentPage {background-position: center center;} @media (min-width:1200px) { section.LargeBlockImage1 div.title1 {font-size:80px; font-weight:700;} } @media (max-width:1199px) { section.LargeBlockImage1 div.title1 {margin-top:80px;} } section.slice_LargeBlockImage div.title1 {margin-left:20px;margin-right:20px;} section.slice_VideoWrapper.SlickNavTransparentOn {height:auto;} header video { width:100% !important; /* height:100vh !important; */ object-fit: fill !important; } /* Slide bar */ section.slice_SlideBar { position: fixed; left:30px; right:30px; bottom: 20px; z-index:1; } section.slice_SlideBar div.SlideBarButton { text-align:center; float:left; width:20%; font-size: 21px; line-height:1; letter-spacing: 1px; background-color: white; border-right: 2px solid black; transform: skewX(-30deg); } section.slice_SlideBar div.SlideBarButton:last-child {border:none;} section.slice_SlideBar a {display:inline-block; padding:15px 0 13px;} section.slice_SlideBar span.SlideBarLinkText {display:block; color:black; border-bottom:2px solid transparent; transform: skewX(30deg);} /* skew back the text */ /* dynamic stuff */ section.slice_SlideBar a:hover span.SlideBarLinkText {border-bottom-color:white;} section.slice_SlideBar div.SlideBarButton:hover, section.slice_SlideBar div.SlideBarButton.SlideBarButtonOn {background-color:black} section.slice_SlideBar div.SlideBarButton:hover span.SlideBarLinkText, section.slice_SlideBar div.SlideBarButton.SlideBarButtonOn span.SlideBarLinkText {color:white;} /* set text color within to override normal link colour */ @media (max-width:992px) { section.slice_SlideBar div.SlideBarButton {font-size: 16px;} section.slice_SlideBar a {padding:6px 0 3px;} } @media (max-width:767px) { section.slice_SlideBar {left:10px;right:10px;bottom:10px;} section.slice_SlideBar div.SlideBarButton {font-size: 14px; letter-spacing:normal;} } @media (max-width:500px) { section.slice_SlideBar {left:0;right:0;bottom:0;} section.slice_SlideBar div.SlideBarButton {font-size: 13px; transform: skewX(0deg);} section.slice_SlideBar div.SlideBarButton.Slide1 {width:15%;text-align:right;} section.slice_SlideBar div.SlideBarButton.Slide1 a {padding-right:10px;} section.slice_SlideBar div.SlideBarButton.Slide3 {width:30%;} section.slice_SlideBar div.SlideBarButton.Slide4 {width:15%;} section.slice_SlideBar div.SlideBarButton.Slide5 {text-align:left;} section.slice_SlideBar div.SlideBarButton.Slide5 a {padding-left:10px;} section.slice_SlideBar span.SlideBarLinkText {border-bottom-width:1px; transform: skewX(0deg);} } section.slice_Footer_D.FooterExpand {padding-bottom: 65px;} /* Header Tint */ header {position:relative;} header section.slice_Header_T.ContentPage {position:absolute;top:0;left:0;right:0;width:100%;} header section.slice_Header_T.HeaderTintOn {background-color: rgba(0,0,0,0.6) !important;} header section.slice_Header_T div.logo-container img {transition:500ms height linear;} /* allow a wider content page */ section.slice_content_page div.container {max-width: 1300px;} /* make scrolling text work */ section.slice_LargeBlockImage div.ArticleBody {position:relative; transition:top 50ms linear; will-change:top;} section.slice_LargeBlockImage {transition:margin-bottom 50ms linear; will-change:margin-bottom;} div.endis-jquery-ui div#divOverlay {font-size:16px;} /* Code to make slide-shows look better on mobile screens */ @media (max-width:600px) { header#anchorVideo video { width: 200% !important; /* double the width, which doubles the height, and then translate so we see the middle 50% */ transform: translateX(-25%); } header#anchorVideo section.slice_VideoWrapper { overflow-x:hidden; overflow-y:visible; } header#anchorVideo div.video-overlay, header#anchorVideo div.SlickNav_Wrapper, header#anchorVideo section.slice_VideoWrapper.SlickNavTransparentOn { overflow-x:visible; overflow-y:visible; } } header#anchorVideo section.slice_Header_T div.SlickNav_Wrapper {position:static;} section.LargeBlockImageContentPage h1 {color:white;text-shadow:0 0 2px black;} @media (min-width:1200px) { section.LargeBlockImageContentPage {padding-top:250px;padding-bottom:250px;} } section.slice_content_page div.main-content {margin-top:0;} section.slice_content_page aside nav a {border-bottom:1px solid #d5d5d5;} @media (min-width:992px) { section.slice_content_page aside.sidebar nav table.group-nav a {padding-left:0 !important;padding-right:0 !important;} } section.slice_content_page .sidebar .sidebar_buttons a.button1 img {top:4px;padding-right:16px;} section.slice_content_page .sidebar .sidebar_buttons a.button2 img {top:4px;margin-left:4px;} section.slice_content_page .sidebar .sidebar_buttons a.button3 img {top:7px;margin-left:2px;} section.slice_FixedSideLinks.ContentPage div.fixed-link-wrapper {background-color:rgba(0,0,0,0.7);} section.slice_Header_T .nav-menu ul.root_menu > li ul li { border-top: 1px solid #888888; } section.slice_Header_T .nav-menu ul.root_menu > li ul ul li { border: 1px solid #7C4299; border-bottom:none; } /* code for > and < on desktop menus */ section.slice_Header_T div.nav-menu ul.root_menu > li ul li.has_sub_menu::after, section.slice_Header_T div.nav-menu ul.root_menu > li:last-child > ul li.has_sub_menu::before, section.slice_Header_T div.nav-menu ul.root_menu > li:nth-last-child(2) > ul li.has_sub_menu::before {top:11px;} /* Fix various issues */ div.endis-jquery-ui div#divOverlay {font-size:17px;line-height:1.3;} body.OnSmallAppleDevice input {-webkit-appearance: none;} body.ArticleEditor img.module_icon {width:auto !important;} section.slice_Footer_L div.footerbar span:last-child:not([id]), section.slice_Footer_D div.footerbar span:last-child:not([id]) { display: block; padding-top: 25px; } section.LargeBlockImageContentPage {text-align:center;position:relative;} section.LargeBlockImageContentPage h1 { position:relative; z-index:0; } section.LargeBlockImageContentPage div.OverlayTint { position:absolute;top:0;bottom:0;left:0;right:0;width:100%;height:100%; background-color:rgba(0,0,0,0.4); } section.slice_content_page.AddTopBorder {border-top:1px solid #dddddd;} /* prevent text-overwriting when desktop menus wrap around */ section.slice_Header_D ul.root_menu ul, section.slice_Header_L ul.root_menu ul, section.slice_Header_T ul.root_menu ul {z-index:4;} /* Fix system page ul lists */ section.slice_system_page div.system_content ul { list-style-type: disc; padding-left:40px; } header div.SlickNav_Wrapper {z-index:1;} /* Fix the new calendar page pop-up */ div.dialog-content.calendar-event-content > h4, div.dialog-content.calendar-event-content > h4 a.event-location-link { display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:center; } /* make sure these are not set */ html,body {height:initial;} footer i.ImageSocialMediaIcon::after {padding:10px !important;} /* Extra icon using a square background image */ footer i.icomoon-icon-XXXXXX.ImageSocialMediaIcon::after { /* Replace url below with actual url of square icon image */ background-image: url(/Images/Content/1495/Templates/46170/images/CommissionLogo.png); } section.slice_LargeBlockImage div.title1, section.slice_LargeBlockImage a.BlockImageButton {text-shadow:0 0 2px black;} /* Centre */ section.slice_LargeBlockImage a.BlockImageButton:hover {text-shadow:none;} header section.slice_Header_T ul.root_menu > li > a {text-shadow:0 0 2px black;} /* Centre */ header section.slice_Header_T ul.root_menu > li:hover > a {text-shadow:none;} header section.slice_Header_T.HeaderTintOn ul.root_menu > li > a, header section.slice_Header_T.ContentPage ul.root_menu > li > a {text-shadow:none;}