/* Theme Name: Jupiter Child Theme Theme URI: http://demos.artbees.net/jupiter5 Description: Child theme for the Jupiter theme Author: Your name here Theme URI: http://themeforest.net/user/artbees Template: jupiter Text Domain: mk_framework Domain Path: /languages/ */ /* =================================================================================================================== =================================================================================================================== ADDITIONS/CHANGES CSS CHILD THEME. =================================================================================================================== =================================================================================================================== */ /* =================================================================================================================== * Responsive styles for One Kennedy in addition to styles defined parent theme * Author: otti@ottimoto.com.au * Autor URL: http://www.ottimoto.com.au =================================================================================================================== */ /* =================================================================================================================== Title: HTML5 Responsive styles - design dependent =================================================================================================================== */ /* color: rgb(0, 0, 0); BLACK. */ /* color: rgb(255, 255, 255); WHITE. */ /* color: rgb(58, 66, 73); DARK GREY. */ /* PAGE BG, TEXT. */ /* #3a4249 */ /* color: rgb(118, 161, 153); PASTEL GREEN. */ /* 2 BED 2 BATH TEXT. */ /* color: rgb(103, 169, 174); OTHER PASTEL GREEN. */ /* NAV TEXT, HEADINGs, BG BEHIND FORM. */ /* color: rgb(237, 112, 37); ORANGE. */ /* HEADING FIRST WORD, BUTTON. */ /* color: rgb(251, 228, 187); ORANGE LIGHT. */ /* color: rgb(19, 50, 88); DARK BLUE. */ /* HEADING FIRST WORD ON GREEN BG. */ /* color: rgb(245, 184, 129); /* LEGEND BG. */ /* color: rgb(180, 180, 180); GREY. */ /* ACCENT COLOUR/HIGHLIGHTED TEXT. */ /* #b4b4b4. */ /* color: rgb(150, 7, 11); RED. */ /* RED BG EXTENSION. */ /* color: rgb(0, 97, 132); FINBAR BLUE. */ /* FINBAR BLUE. */ /* FONTS. */ /* Montserrat and Roboto selected in Jupiter Theme Options. */ /* Montserrat Light = 300 Montserrat Regular = 400 Montserrat Medium = 500 Montserrat Bold = 700 Roboto Light = 300 Roboto Regular = 400 Roboto Medium = 500 */ /* OWN CSS FILES. ====================================================================================================================== */ /* @import 'mediaquery-reporter.css'; Add media reporter to see bar for breakpoint changes. DELETE!!! */ /* HELPER CLASSES. ====================================================================================================================== */ /* Add the .visuallyhidden class to hide text from browsers but make it available for screen readers. Hide only visually, but have it available for screenreaders: h5bp.com/v */ .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* HELPER CLASSES. ====================================================================================================================== */ /* GENERAL. ====================================================================================================================== */ /* Set body background to Dark Grey. */ body { /* background-color: rgb(58, 66, 73); DARK GREY. */ /* PAGE BG, TEXT. */ /* #3a4249 */ } /* As no sticky header is used we need to eliminate spaces after header and before footer. */ #theme-page .theme-page-wrapper { margin: 0 auto !important; } #theme-page .theme-page-wrapper .theme-content { padding-top: 0 !important; padding-bottom: 0 !important; } /* LINKS - NOT REALLY APPLICABLE. */ a, a:visited { color: rgb(103, 169, 174); /* OTHER PASTEL GREEN. */ /* NAV TEXT, HEADINGs, BG BEHIND FORM. */ } a:hover, a:active, a:focus { color: rgb(237, 112, 37); /* ORANGE. */ /* HEADING FIRST WORD, BUTTON. */ } /* BUTTONS. */ /* General defined with generic button. Set width to 100%. Here more details and changes. */ .mk-button, .mk-button:visited { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 19px; background-color: rgb(237, 112, 37) !important; /* ORANGE. */ /* HEADING FIRST WORD, BUTTON. */ color: rgb(255, 255, 255) !important; /* WHITE. */ border: 1px solid rgb(255, 255, 255); /* WHITE. */ padding-left: 15%; padding-right: 15%; letter-spacing: 0; } .mk-button:hover, .mk-button:active, .mk-button:focus { background-color: rgb(251, 228, 187) !important; /* ORANGE LIGHT. */ color: rgb(58, 66, 73) !important; /* DARK GREY. */ /* PAGE BG, TEXT. */ } /* Amenities skinnier Button: Smaller text in green. Carful ID. */ .skinnierButton .mk-button, .skinnierButton .mk-button:visited { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px; background-color: transparent !important; color: rgb(103, 169, 174) !important; /* OTHER PASTEL GREEN. */ /* NAV TEXT, HEADINGs, BG BEHIND FORM. */ border: 1px solid rgb(255, 255, 255); /* WHITE. */ padding-left: 30px; padding-right: 30px; transition: color: .1s ease-in-out,background .1s ease-in-out,border .1s ease-in-out; -webkit-transition: .1s ease-in-out,background .1s ease-in-out,border .1s ease-in-out; } #mk-button-9.skinnierButton .mk-button:hover, #mk-button-9.skinnierButton .mk-button:active, #mk-button-9.skinnierButton .mk-button:focus { color: rgb(237, 112, 37) !important; /* ORANGE. */ /* HEADING FIRST WORD, BUTTON. */ } /* Additional class assigned to skinnierButton to add grey border instead. Careful ID. */ .skinnierButton.greyBorderButton .mk-button, .skinnierButton.greyBorderButton .mk-button:visited { border: 1px solid rgb(58, 66, 73); /* DARK GREY. */ /* PAGE BG, TEXT. */ } #mk-button-27.skinnierButton.greyBorderButton .mk-button:hover, #mk-button-27.skinnierButton.greyBorderButton .mk-button:active, #mk-button-27.skinnierButton.greyBorderButton .mk-button:focus, #mk-button-29.skinnierButton.greyBorderButton .mk-button:hover, #mk-button-29.skinnierButton.greyBorderButton .mk-button:active, #mk-button-29.skinnierButton.greyBorderButton .mk-button:focus { color: rgb(237, 112, 37) !important; /* ORANGE. */ /* HEADING FIRST WORD, BUTTON. */ border: 1px solid rgb(58, 66, 73); /* DARK GREY. */ /* PAGE BG, TEXT. */ } /* Orange Buttons for bottom green strip (pre footer) and form. */ /* Drop shadow on green form box. */ .buttonDropShadow .mk-button, input.button.buttonDropShadow { /* First value = x-offset, Second value = y-offset, Third value = blur radius, Fourth value = spread/radius. */ -webkit-box-shadow: 5px 5px 10px rgba(0,0,0,0.4); -moz-box-shadow: 5px 5px 10px rgba(0,0,0,0.4); box-shadow: 5px 5px 10px rgba(0,0,0,0.4); } /* Buttons for downloads inside Lightboxes. */ .buttonLightboxDownload .mk-button, .buttonLightboxDownload .mk-button:visited { background-color: rgb(255, 255, 255) !important; /* WHITE. */ border: 1px solid rgb(58, 66, 73); /* DARK GREY. */ /* PAGE BG, TEXT. */ color: rgb(103, 169, 174) !important; /* OTHER PASTEL GREEN. */ /* NAV TEXT, HEADINGs, BG BEHIND FORM. */ font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px; } .buttonLightboxDownload .mk-button:hover, .buttonLightboxDownload .mk-button:active, .buttonLightboxDownload .mk-button:focus { background-color: rgb(255, 255, 255) !important; /* WHITE. */ border: 1px solid rgb(58, 66, 73); /* DARK GREY. */ /* PAGE BG, TEXT. */ color: rgb(237, 112, 37) !important; /* ORANGE. */ /* HEADING FIRST WORD, BUTTON. */ } /* Also make sure the other button to download the plans have the correct font. */ .downloadPlanButton { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px; } /* END GENERAL. ====================================================================================================================== */ /* TYPOGRAPHY. ====================================================================================================================== */ /* */ ul { font-size: 12px; line-height: 1.4em; } /* Home: Middle row: Price points - the apartment type. */ #middleRowPricePoints .apartmentsStyle { font-weight: 400; } /* Home: Disclaimer under price points on Home page. */ .priceDisclaimer p { font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 400; } /* Heading with orange /bold part and green light part. Green defined in Theme Options. */ .headingPartOrange, .headingPartBlue { font-weight: 500; } h3.mk-fancy-title { line-height: 1; } h4.mk-fancy-title { line-height: 1.1; } /* Lifestyle Map. */ .lifestyleMapLegendRow ol li { font-family: Montserrat; font-size: 10px; line-height: 1.4em; color: black; } /* Apartment slider button. */ .orangeGreenHeading, .orangeBlueHeading { font-size: 15px; } /* Apartment Plates. */ .aptPlateText { font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 500; } /* Individual Apartments. */ /* The heading first then the text. */ .aptTextorangeGreenHeading { font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 500; } .aptTextorangeGreenHeading .headingPartOrange { font-weight: 700; } .aptTypeText, .aptTypeList { font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: 11px; } .aptTypeTextBold { font-weight: 700; } .downloadPlanButton { font-family: 'Montserrat', sans-serif; } /* Small text underneath normal text as reference to source. */ .sourceReference p { font-size: 9px; } /* Mobile first: Developer: Finbar: The text on the left of the developers page to be larger. */ .largeBlueText p { font-size: 20px; } /* The small disclaimer text on Developer/Finbar page. */ .finbarSmallText p { font-size: 9px; } /* Pre Footer with enquire button and sales office details. */ .salesOffice, .salesOfficeTimes, .salesTimes { font-family: 'Montserrat', sans-serif; margin-bottom: 0; line-height: 1.1; } .salesOffice { font-weight: 500; font-size: 19px; } /* Pre Footer with enquire button and sales office details. */ .salesOfficeTimes { font-weight: 400; font-size: 15px; margin-bottom: 3px; } /* Pre Footer with enquire button and sales office details. */ .salesAddress { font-weight: 300; font-size: 15px; } /* Footer fonts & COntact page as well. */ /* Sales agent texts individually. Also for CONTACT page. */ #mk-footer p.salesName, .contactSalesAgent p.salesName { font-size: 21px; font-weight: 600; } #mk-footer p.salesEmail, .contactSalesAgent p.salesEmail { font-size: 11px; font-weight: 400; } #mk-footer p.salesNumber, .contactSalesAgent p.salesNumber { font-size: 30px; font-weight: 700; } #mk-footer p.salesCompany, , .contactSalesAgent p.salesCompany { font-size: 11px; font-weight: 300; } /* END TYPOGRAPHY. ====================================================================================================================== */ /* HEADER. ====================================================================================================================== */ /* Remove the bottom border of header. */ .mk-header { border-bottom: 0px solid white; } /* END HEADER. ====================================================================================================================== */ /* NAVIGATION. ====================================================================================================================== */ /* Special button at the end of nav for Enquiry - directing to contact page too. */ /* First remove the hover underline with it's transition. */ .main-navigation-ul li.menu-item.navEnquire:hover a:after { background-color: rgb(58, 66, 73) !important; /* DARK GREY. */ /* PAGE BG, TEXT. */ /* #3a4249 */ opacity: 0 !important; transform: scale(0,1) !important; } /* Then change the text colour and add border. */ .main-navigation-ul li.menu-item.navEnquire a, .main-navigation-ul li.menu-item.navEnquire a:visited { color: white; border: 1px solid rgb(237, 112, 37); /* ORANGE. */ /* HEADING FIRST WORD, BUTTON. */ transition:color .1s ease-in-out,background .1s ease-in-out,border .1s ease-in-out; -webkit-transition:color .1s ease-in-out,background .1s ease-in-out,border .1s ease-in-out; } .main-navigation-ul li.menu-item.navEnquire a:hover, .main-navigation-ul li.menu-item.navEnquire a:active, .main-navigation-ul li.menu-item.navEnquire a:focus { color: white; background-color: rgb(237, 112, 37); /* ORANGE. */ /* HEADING FIRST WORD, BUTTON. */ border: 1px solid rgb(237, 112, 37); /* ORANGE. */ /* HEADING FIRST WORD, BUTTON. */ } /* Allow for some space around the enquire button due to its width change with border. */ .main-navigation-ul li.menu-item.navEnquire { margin-left: 20px; margin-right: 15px; } /* Remove the underline (here bg), when the Enquiry button is clicked and therefore the COntact page is active. */ .main-navigation-ul li.menu-item.navEnquire.current-menu-item a::after { background-color: transparent; } /* On mobile nav just change the text to white. Hover states as they are on mobile, as hover does not really exist. */ .mk-responsive-nav li.menu-item.navEnquire a { color: white !important; } /* END NAVIGATION. ====================================================================================================================== */ /* HERO SLIDER & HERO IMAGES. ====================================================================================================================== */ /* Home page layer slider with lines instead of bullets as navigation. */ /* Use Specificity - other not overwriting. */ .ls-v6.ls-v6 .ls-bottom-slidebuttons a, .ls-v6 .ls-nav-sides { border-radius: 0 !important; border: 0px solid white !important; width: 50px !important; height: 3px !important; } /* Set the background colours. */ .ls-v6.ls-v6 .ls-bottom-slidebuttons a:hover, .ls-v6.ls-v6 .ls-bottom-slidebuttons a:active, .ls-v6.ls-v6 .ls-bottom-slidebuttons a:focus { border: 0px solid white !important; } .ls-v6.ls-v6 .ls-bottom-slidebuttons a { background-color: white; } .ls-v6.ls-v6 .ls-bottom-slidebuttons a.ls-nav-active { background-color: rgb(237, 112, 37); /* ORANGE. */ /* HEADING FIRST WORD, BUTTON. */ } /* Scheme Thumb Slider on Design page. */ /* The text for the Scheme. */ .ls-v6.ls-v6.design-scheme-slider { font-family: Montserrat; font-weight: 300; } .ls-v6.ls-v6.design-scheme-slider .schemeLetter { font-weight: 500; color: rgb(237, 112, 37); /* ORANGE. */ /* HEADING FIRST WORD, BUTTON. */ } /* END HERO SLIDER & HERO IMAGES. ====================================================================================================================== */ /* HOME. ====================================================================================================================== */ /* middleRowPricePoints. */ /* Middle row: Price points - prices themselves. */ #middleRowPricePoints .pricePoints { font-family: 'Montserrat', sans-serif; font-size: 80px; margin-bottom: 0; font-weight: 700; line-height: 1.1; color: rgb(255, 255, 255); /* WHITE . */ } #middleRowPricePoints .pricePoints .dollarSign { font-size: 76px; } #middleRowPricePoints .pricePoints sup { font-size: 30%; top: -.5em; } /* Middle row: Price points - the apartment type. */ #middleRowPricePoints .apartmentsStyle { font-family: 'Roboto', sans-serif; font-size: 20px; line-height: 1.5; margin-left: 4%; margin-right: 4%; margin-bottom: 5px; color: rgb(118, 161, 153); /* PASTEL GREEN. */ /* 2 BED 2 BATH TEXT. */ border-top: 2px solid rgb(237, 112, 37); /* ORANGE. */ /* HEADING FIRST WORD, BUTTON. */ } /* Disclaimer under price points on Home page. */ .priceDisclaimer p { color: white; margin-bottom: 0; } /* The fancy title under the price points on Home page. */ .homeOrangeFancyTitle { margin-bottom: 0; } /* Counter. */ /* Remove the icon box with its margins. */ .mk-milestone.center-align i { display: none; } /* Format the counter. */ .counterSold { width: 165px; height: 165px; background-color: rgb(103, 169, 174); /* OTHER PASTEL GREEN. */ /* NAV TEXT, HEADINGs, BG BEHIND FORM. */ border-radius: 50%; border: 3px solid white; padding: 15px; margin: 0 auto; box-shadow: 0 0 0 3px rgb(103, 169, 174); /* OTHER PASTEL GREEN. */ /* NAV TEXT, HEADINGs, BG BEHIND FORM. */ } /* Remove the letter spacing and change line height of the suffix text. */ .mk-milestone .milestone-number, .mk-milestone .milestone-prefix, .mk-milestone .milestone-suffix { letter-spacing: 0; line-height: 100%; } /* COUNTER & SEAL. Position the counter and the seal. */ .sealImage, .counterSold { margin-top: 25px; margin-bottom: 25px; } /* END HOME. ====================================================================================================================== */ /* PAGES. ====================================================================================================================== */ /* The text content with logo bg is placed as a section and two nested rows: .innerBackgroundRow and .greenBackgroundLogo and .greyBackgroundLogo */ .innerBackgroundRow.innerBackgroundRow, .greenBackgroundLogo.greenBackgroundLogo, .greenLargeBackgroundLogo.greenLargeBackgroundLogo, .greyBackgroundLogo.greyBackgroundLogo { background-position: 0 50% !important; } /* Due to not being able to use sections and the colour, logo combination, I need to insert the logo for the green strip here. */ .greenBackgroundLogo.greenBackgroundLogo { background-image: url(images/content-bg-logo-green.png); background-repeat: no-repeat; background-position: left center; } /* Due to not being able to use sections and the colour, logo combination, I need to insert the logo for the green strip here. */ .greenLargeBackgroundLogo.greenLargeBackgroundLogo { background-image: url(images/content-bg-logo-green-large.png); background-repeat: no-repeat; background-position: left center; } /* Due to not being able to use sections and the colour, logo combination, I need to insert the logo for the grey strip here. */ .greyBackgroundLogo.greyBackgroundLogo { /* REMOVED background-position: 100% 50% !important; background-image: url(images/content-bg-logo-grey.png); background-repeat: no-repeat; background-position: right center; */ } /* Heading with orange or blue and bold part and green light part. Green defined in Theme Options. */ /* First move the whole para to left with negative margin. */ .orangeGreenHeading, .orangeBlueHeading { margin-left: -40px; } /* The span for the orange or blue part of the text with border bottom. Display inline-block to "release" the underline and move it over with padding - equalising the negative margin of the para. */ .headingPartOrange { color: rgb(237, 112, 37); /* ORANGE. */ /* HEADING FIRST WORD, BUTTON. */ border-bottom: 1px solid rgb(237, 112, 37); /* ORANGE. */ /* HEADING FIRST WORD, BUTTON. */ display: inline-block; padding-left: 40px; } .headingPartBlue { color: rgb(19, 50, 88); /* DARK BLUE. */ /* HEADING FIRST WORD ON GREEN BG. */ border-bottom: 1px solid rgb(19, 50, 88); /* DARK BLUE. */ /* HEADING FIRST WORD ON GREEN BG. */ display: inline-block; padding-left: 40px; } /* Headings with sticking out underline when three containers next to each other. Less margin/padding to not stick out as much. Remove fancy title padding bottom. Add margin top. */ .threeInARow .orangeGreenHeading, .threeInARow .orangeBlueHeading { margin-left: 5px; margin-right: 5px; padding-bottom: 0px !important; margin-top: 40px; } .threeInARow .headingPartOrange, .threeInARow .headingPartBlue { padding-left: 20px; } /* Align the text underneath the headings. */ .threeInARow .mk-text-block { margin-left: 25px; margin-right: 25px; } /* THUMB SLIDERS. */ /* Mobile first: Need to set height for thumb sliders. Assign class to row for each in Jupiter and set height appropriately -> there will be larger gap on smaller devices between breakpoints. */ /* Indent with margin left and right. */ .allThumbSlider .ls-fullscreen-wrapper, .allThumbSliderGrey .ls-fullscreen-wrapper { height: 210px; margin-left: 15px; margin-right: 15px; } /* Also from Tayana for thumb sliders. */ body .ls-touchscroll { /* overflow-x: hidden !important; */ overflow: visible !important; } /* To make thumbnails visible on tablets and mobiles. */ /* .ls-thumbnail-wrapper, .ls-thumbnail, .ls-thumbnail-inner, .ls-thumbnail-slide-container, .ls-thumbnail-slide { display: block !important; visibility: visible !important; } .ls-thumbnail-wrapper { } */ /* Remove white bg for inner slider. */ .ls-v6.ls-v6 .ls-thumbnail-inner { background: transparent; } /* But some sliders sit on grey bg. */ .ls-v6.ls-v6 .allThumbSliderGrey .ls-thumbnail-inner { background: rgb(58, 66, 73); /* DARK GREY. */ /* PAGE BG, TEXT. */ /* #3a4249 */ } /* Ensure the transparency of the thumbs sitting on non-white bg is working correctly with white behind it. */ html .ls-thumbnail a, body .ls-thumbnail a, #ls-global .ls-thumbnail a { background: white !important; } /* Pre Footer with enquire button and sales office details. */ .salesOffice, .salesOfficeTimes, .salesAddress { color: white; } /* LIFESTYLE. */ .lifestyleMapRow { margin-left: 15px !important; margin-right: 15px !important; } /* Remove margin left for lists. */ .lifestyleMapLegend .leftList ol, .lifestyleMapLegend .rightList ol { /* margin-left: 0; */ } /* Mobile first: The columns need to be stacked differently - 2 next to each other on smaller devices. */ .legendCol.vc_col-sm-3 { width: 50%; float: left; } /* Remove margin bottom for the lists. */ .rightList, .leftList { margin-bottom: 0 !important; } /* PANORAMA 360 VIEWER. */ /* Mobile first: Original size set in theme. Adjust height accordingly for different devices. */ .panorama360.panorama360 { height: 300px !important } /* Center the controls in the 360 Panorama Viewer. */ .panorama360 .controls { left: 50% !important; margin-left: -46px; /* half of the controls width. */ } /* The icons in five columns on the Lifestyle page. */ /* Mobile first: Make the icons smaller on mobile devices. -> later again 100% and padding on grid to indent left and right. */ .fiveColumns .mk-grid .wpb_single_image img { max-width: 30%; } /* APARTMENTS. */ /* Indent the row which holds the apartment slider. */ .apartmentSliderRow .ls-fullscreen-wrapper { margin-left: 15px; margin-right: 15px; } /* AMENITIES ROW. */ /* Mobile first: Change indent for amenities box. */ .theme-page-wrapper:not(.full-width-layout) .attched-true.vc_row.amenitiesRow { margin-left: 0px !important; margin-right: 0px !important; } /* Amenities. Mobile first: Content column Amenities - indent left and right. */ .amenitiesContent { padding-left: 15px; padding-right: 15px; } /* Less margin for fancy title only here. */ .amenitiesContent .orangeGreenHeading { margin-bottom: 0; } /* The popup image without margin bottom. */ #popmake-1433 .wpb_content_element { margin-bottom: 0px; } /* APARTMENT FLOOR PLATE BUTTONS. */ /* First remove the margin bottom for paras in general as there is one blank p added at the end in the html in layerslider. */ .buttonFloorG.ls-layer p, .buttonFloor1.ls-layer p, .buttonFloor2.ls-layer p, .buttonFloorB.ls-layer p { margin-bottom: 0px; } /* Then also change the margin bottom for the heading. */ .buttonFloorG.ls-layer p.headingButton, .buttonFloor1.ls-layer p.headingButton, .buttonFloor2.ls-layer p.headingButton, .buttonFloorB.ls-layer p.headingButton { margin-bottom: 10px; } /* Then also change the margin bottom for the text and indent the text from left according to the padding indent of the coloured heading following. */ p.textButton { margin-bottom: 20px; padding-left: 40px; } /* Appropriate padding and different left margin for line (adjust above too). */ .headingButton.orangeGreenHeading { color: rgb(103, 169, 174); /* OTHER PASTEL GREEN. */ /* NAV TEXT, HEADINGs, BG BEHIND FORM. */ padding-left: 40px; padding-right: 10px; margin-left: -20px; } /* The span changes too. */ .headingButton.orangeGreenHeading .headingPartOrange { padding-left: 20px; } /* The number of apartments inside the buttons to be bolder. */ p.textButton span { font-weight: 500; } /* Also the text inside the apartment slider button. */ p.textButton { font-size: 15px; } /* Media queries for apartment slider buttons. Hide on smaller devices. */ @media only screen and (max-width: 58.75em) { /* Also the text inside the apartment slider button. */ p.textButton { display: none; } } /* Up to 1024px still hide the text and leave the heading. */ @media only screen and (max-width: 64em) { p.textButton { display: none; } /* This is to reduce the height of the butotns once the apartment list underneath the heading is removed. */ .buttonFloorG.ls-layer.buttonFloorG.ls-layer, .buttonFloor1.ls-layer.buttonFloor1.ls-layer, .buttonFloor2.ls-layer.buttonFloor2.ls-layer, .buttonFloorB.ls-layer.buttonFloorB.ls-layer { padding-bottom: 10px !important; } } /* Up to 1200px small heading and small text. Add padding bottom for the layer. */ @media only screen and (max-width: 75em) { .buttonFloorG.ls-layer, .buttonFloor1.ls-layer, .buttonFloor2.ls-layer, .buttonFloorB.ls-layer { padding-bottom: 20px !important; } .headingButton.orangeGreenHeading { font-size: 13px; } p.textButton { font-size: 12px; } } /* Above 1201px larger heading and larger text. Different padding bottom for layer. */ @media only screen and (min-width: 75.0625em) { .buttonFloorG.ls-layer, .buttonFloor1.ls-layer, .buttonFloor2.ls-layer, .buttonFloorB.ls-layer { padding-bottom: 15px !important; } .headingButton.orangeGreenHeading { font-size: 15px; } p.textButton { font-size: 14px; } } /* SINGLE APARTMENT BUTTONS. */ /* Buttons on top of floor plate round. */ .fa-arrow-right:before { display: none; } /* The button now not a circle anymore, buit set fonts and underline. */ .circleButton.fa { font-family: 'Montserrat', sans-serif; font-weight: 500 !important; font-size: 12px !important; border-bottom: 1px solid rgb(58, 66, 73); /* DARK GREY. */ /* PAGE BG. */ } /* APARTMENTS MOBILE. */ #mk-tabs .title-mobile { margin-left: -10px; margin-right: -10px; border-bottom-width: 0px; color: white; background-color: rgb(58, 66, 73); /* DARK GREY. */ /* PAGE BG. */ text-align: center; } /* Apartments Mobile: We load the same post as we do in the slider for mobile too. Just needs a bit of styling. Class assigned to each blog in popup. */ .postPulledMobilePopup .mk-blog-classic-item { margin-bottom: 0; border: 0px solid white; } .postPulledMobilePopup .mk-blog-classic-item .mk-blog-meta { padding: 0; } .postPulledMobilePopup .mk-blog-classic-item .mk-blog-meta-wrapper { display: none; } .postPulledMobilePopup .mk-blog-meta h3.the-title { display: none; } .postPulledMobilePopup .mk-readmore { display: none; } /* List of apartments on mobile. */ .aptListmobile li { margin-bottom: 3px; } /* Have two columns next to each other. */ .apartmentTabsMobile .vc_col-sm-4 { width: 33.333%; float: left; } /* Underline the apt list names. */ .aptListmobile li { text-decoration : underline; } /* TOOLTIPS. */ /* Use adjacent sibling selector for link after the div I know the class of. */ /* Before is responsible for the arrow down. */ /* Content of each tooltip in layerslider -> Link & Attributes -> Custom Attributes. */ .aptNumber + a.ls-layer-link::before { visibility: hidden; } .aptNumber + a:hover.ls-layer-link::before { visibility: visible !important; content: ""; position: absolute; top:-6px; left:50%; transform: translateX(-50%); border-width: 12px 6px 0 6px; /* was border-width: 4px 6px 0 6px; */ border-style: solid; border-color: rgb(58, 66, 73) transparent transparent transparent; /* DARK GREY. */ /* PAGE BG. */ z-index: 100; } /* After references to the attribute tooltip, given to the layer inside layerslider. */ .aptNumber + a.ls-layer-link::after { visibility: hidden; } .aptNumber + a:hover.ls-layer-link::after { visibility: visible !important; content: attr(tooltip); position: absolute; left:50%; top:-6px; transform: translateX(-50%) translateY(-100%); background: rgb(58, 66, 73); /* DARK GREY. */ /* PAGE BG. */ text-align: center; color: #fff; padding:4px 4px; font-size: 12px; min-width: 95px; border-radius: 0px; pointer-events: none; } /* INDIVIDUAL APARTMENTS. */ /* Heading with orange or blue and bold part and green light part. Green defined in Theme Options. */ /* First move the whole para to left with negative margin. */ .aptTextorangeGreenHeading { margin-left: 0px; margin-bottom: 10px; color: rgb(103, 169, 174); /* OTHER PASTEL GREEN. */ /* NAV TEXT, HEADINGs, BG BEHIND FORM. */ } /* Now the heading without the orange line and no indent. */ .aptTextorangeGreenHeading .headingPartOrange { color: rgb(237, 112, 37); /* ORANGE. */ /* HEADING FIRST WORD, BUTTON. */ border-bottom: 0px solid rgb(237, 112, 37); /* ORANGE. */ /* HEADING FIRST WORD, BUTTON. */ display: inline-block; padding-left: 0px; } /* First remove margin bottom for all text paras. Then add space after with class as needed. */ .aptTypeText { margin-bottom: 0; } .aptTypeText.pSpaceAfter { margin-bottom: 5px; } /* The sup. */ .aptTypeText sup { top: 0; } /* The list throws some paras in there -> remove. */ ul.aptTypeList p { display: none; } /* Return Button. */ .circleIconReturn { margin-right: 10px; } /* DEVELOPER. */ /* Text on developers page in Finbar blue. */ .finbarTextBlue p { color: rgb(0, 97, 132); /* FINBAR BLUE. */ /* FINBAR BLUE. */ } /* Set overflow on container with bg graphic to visible, otherwise logo will be cut off. */ .finbarContentContainer { overflow: visible !important; } /* Position the logo absolute with negative on top. Left negative margin half the width of logo. */ .loyaltyClubLogoAbsolute { position: absolute; top: -50px; left: 50%; margin-left: -119px; } /* The white text. */ .finbarWhiteText p, .finbarWhiteText ul { color: white; } .pNoMargBottom p { margin-bottom: 0; } /* White text lonk with underline and always white. */ a.whiteLink, a.whiteLink:visited { color: white; text-decoration: underline; } a.whiteLink:hover, a.whiteLink:active, a.whiteLink:focus { color: white; } /* Restrict the text on the right to 156px - same width as images. */ .maxWidth156 { max-width: 156px; } /* Ensure the images are butt joined. */ .verticalAlignBottom img { vertical-align: bottom; } /* CONTACT. */ /* The end of the heading white here as on green bg. */ .whiteEnding { color: white; } /* Font and line-height for sales agents on Contact page - same as footer. */ .contactSalesAgent p { font-family: 'Montserrat', sans-serif; margin-bottom: 0; line-height: 1.1; } /* END PAGES. ====================================================================================================================== */ /* BLOG PAGES. ====================================================================================================================== */ /* BLOG TEASER. */ /* Make title of post all lower case. */ .blogTeaser .mk-blog-meta h3.the-title { text-transform: lowercase !important; font-weight: 500; font-size: 15px; } /* The load more button same style as skinnier buttons. */ a.mk-loadmore-button, a.mk-loadmore-button:visited { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px; background-color: transparent !important; color: rgb(103, 169, 174) !important; /* OTHER PASTEL GREEN. */ /* NAV TEXT, HEADINGs, BG BEHIND FORM. */ border: 1px solid rgb(58, 66, 73); /* DARK GREY. */ /* PAGE BG, TEXT. */ transition: color: .1s ease-in-out,background .1s ease-in-out,border .1s ease-in-out; -webkit-transition: .1s ease-in-out,background .1s ease-in-out,border .1s ease-in-out; letter-spacing: 0px; width: 20%; border-radius: 0px; line-height: 1; padding: 10px 0; } a.mk-loadmore-button:hover { color: rgb(237, 112, 37) !important; /* ORANGE. */ /* HEADING FIRST WORD, BUTTON. */ } /* Hide the down arrow. */ .mk-loadmore-button svg.mk-svg-icon { display: none; } /* Lower case for read more link. Also change hover colour. */ .mk-readmore { text-transform: lowercase; font-family: 'Montserrat', sans-serif; font-weight: 500; } .mk-readmore:hover, .mk-readmore:active, .mk-readmore:focus { color: rgb(237, 112, 37) !important; /* ORANGE. */ /* HEADING FIRST WORD, BUTTON. */ } /* SINGLE BLOG POST PAGES. */ /* Hide the large blog title on top of image. */ .single-post .page-title { display: none; } /* Remove the author and the category. */ .single-post .blog-single-meta .mk-blog-author, .single-post .blog-single-meta .mk-post-cat { display: none; } /* Change the color for print icon and social icons. */ .single-post .mk-blog-print svg, .single-post .blog-single-share svg { fill: rgb(103, 169, 174); /* OTHER PASTEL GREEN. */ /* NAV TEXT, HEADINGs, BG BEHIND FORM. */ } .single-post .single-share-box, .single-post .single-share-box:before { background-color: rgb(103, 169, 174); /* OTHER PASTEL GREEN. */ /* NAV TEXT, HEADINGs, BG BEHIND FORM. */ } .single-post .single-share-box li a { color: rgb(251, 228, 187); /* ORANGE LIGHT. */ } /* The left and right navigation. */ .single-post .mk-post-nav .pagenav-title { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px; text-transform: lowercase; color: rgb(103, 169, 174); /* OTHER PASTEL GREEN. */ /* NAV TEXT, HEADINGs, BG BEHIND FORM. */ } .single-post .mk-post-nav .pagenav-category { display: none; } .single-post .mk-post-nav .pagenav-bottom { height: 60px; } .single-post .pagnav-wrapper .pagenav-top .mk-pavnav-icon { background-color: rgba(103, 169, 174, 0.5); /* OTHER PASTEL GREEN. */ /* NAV TEXT, HEADINGs, BG BEHIND FORM. */ } /* Fancy box when image is clicked. */ .fancybox-title-float-wrap .child { text-transform: lowercase; font-size: 15px; color: rgb(237, 112, 37); /* ORANGE. */ /* HEADING FIRST WORD, BUTTON. */ } .fancybox-close { background-color: rgba(103, 169, 174, 0.5); /* OTHER PASTEL GREEN. */ /* NAV TEXT, HEADINGs, BG BEHIND FORM. */ } /* END BLOG PAGES. ====================================================================================================================== */ /* LIGHBOX/GALLERY IMAGES. ====================================================================================================================== */ /* END LIGHBOX/GALLERY IMAGES. ====================================================================================================================== */ /* FOOTER. ====================================================================================================================== */ /* Mobile first: Columns inside footer to collapse earlier when smaller screen -> stacked below 940/941px already. */ #mk-footer .mk-col-1-4 { width: 100%; } /* Footer text all to be in Montserrat and no margin bottom. */ #mk-footer p { font-family: 'Montserrat', sans-serif; margin-bottom: 0; line-height: 1.1; } /* Mobile first. Text align center and no float. Above main breakpoint float the left column to the right and align all column text left. */ #mk-footer #custom_html-5 .textwidget { text-align: center; } #mk-footer #custom_html-6 .textwidget { text-align: center; } /* The image in the center column always to be centered. */ #mk-footer #media_image-3 { text-align: center; padding-bottom: 10px; } /* Mobile first: The Retina logo in the center column with various sizes on different devices. */ #mk-footer #media_image-3 img { max-width: 80% !important; } /* SOCIAL NETWORKS IN FOOTER. */ /* Social network logos themselves. Load image (only one image each - as only transparency change), set width and height and display relative and move text out. */ .social-footer a.socials { display: inline-block; position: relative; width: 24px; height: 24px; background-image: url(images/social-logos-one-kennedy.png); background-repeat: no-repeat; text-indent: -99999px; -webkit-backface-visibility: hidden; /* Avoid flickering in Safari due to translate/transform in quick links above footer. */ } /* Then load sprite image again into span. This time absolute, invisible with 0 opacity and set transition. */ .social-footer a.socials span { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-image: url(images/social-logos-one-kennedy.png); background-repeat: no-repeat; opacity: 0; transition: opacity .2s ease-in-out; } /* Then position sprites in white version first for the normal state of each social network. Then position the coloured version shown on hover inside the span with correct coordinates. Finally set the hover state of the coloured version inside the span to full opacity. */ .social-footer a.socials.facebook { background-position: 0px 0px; } .social-footer a.socials.facebook span { background-position: -24px 0px; } .social-footer a.socials.instagram { background-position: 0px -24px; } .social-footer a.socials.instagram span { background-position: -24px -24px; } .social-footer a:hover.socials.facebook span, .social-footer a:hover.socials.instagram span { opacity: 1; } /* Mobile first: The SOCIAL ICONS floating inside the widget. */ /* Smaller devices to have all centered and above breakpoint float what's required. */ .footerFinbar { text-align: center; margin-bottom: 15px; } .social-footer { text-align: center; } .fbook, .insta { margin-bottom: 10px; } /* SUB FOOTER. */ /* Mobile first sub footer: Set height and place line pattern graphic (has bottom space for grey to shine through). Various height later. */ #sub-footer { height: 250px; background-image: url(images/coloured-line-pattern-footer.png); background-color: rgb(58, 66, 73); background-repeat: repeat-x; background-position: center bottom; } /* FOOTER NAVIGATION. */ /* First for mobile ensure it is still horizontal with media query below main breakpoint. */ @media handheld, only screen and (max-width:767px) { #mk-footer-navigation ul li { /* float: left !important; */ display: inline-block !important; width: auto !important; } } /* Move it from right to left. */ #mk-footer-navigation { float: none; text-align: center; } #mk-footer-navigation > ul { text-align: center; display: inline-block; } /* Mobile first: Style similar to main nav - just the border bottom is different (no animation). Change font size later. */ #mk-footer-navigation > ul li a { color: rgb(103, 169, 174); /* OTHER PASTEL GREEN. */ /* NAV TEXT, HEADINGs, BG BEHIND FORM. */ font-size: 14px; font-weight: 500; padding-right: 0px !important; padding-left: 0px !important; padding-top: 5px !important; padding-bottom: 5px !important; text-transform: uppercase; letter-spacing: 0px; } /* Mobile first. Change later. */ #mk-footer-navigation > ul li { margin-left: 10px !important; margin-right: 10px !important; } /* Border botom on hover and followed by current page. */ #mk-footer-navigation > ul li:hover a:after { content: ""; display: block; width: 100%; background-color: rgb(103, 169, 174); /* OTHER PASTEL GREEN. */ /* NAV TEXT, HEADINGs, BG BEHIND FORM. */ height: 2px; } #mk-footer-navigation > ul li.current_page_item a:after { content: ""; display: block; width: 100%; background-color: rgb(103, 169, 174); /* OTHER PASTEL GREEN. */ /* NAV TEXT, HEADINGs, BG BEHIND FORM. */ height: 2px; } /* The the brochure download to be styled differently. */ #mk-footer-navigation > ul li.footerNavBrochure:hover a:after { height: 0px; } #mk-footer-navigation > ul li.footerNavBrochure a, #mk-footer-navigation > ul li.footerNavBrochure a:visited { color: white; padding-left: 15px !important; padding-right: 15px !important; border: 1px solid white; } #mk-footer-navigation > ul li.footerNavBrochure a:hover, #mk-footer-navigation > ul li.footerNavBrochure a:active, #mk-footer-navigation > ul li.footerNavBrochure a:focus { background: rgb(237, 112, 37); /* ORANGE. */ /* HEADING FIRST WORD, BUTTON. */ } /* GO TO TOP LINK. */ /* Remove link to top of the page. */ .mk-go-top { display: none; } /* FOOTER. ====================================================================================================================== */ /* FORM - REGISTER YOUR INTEREST. ====================================================================================================================== */ /* Register form row (inside functions.php). */ /* Set the width of the form for various devices. Also ensure the form is centered. */ #bottomRowForm .mk-grid .formBlock { width: 95%; margin: 0 auto; } /* Make input fields 100% wide. Remove border and box shadow from input fields (normal and focus). allow for bg colour transition on focus. Set colour to black and margin top for all states. */ input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea, body .footr-container input, body .footr-container textarea { font-family: 'Roboto', sans-serif; font-weight: 400; font-size: 14px; width: 100%; background-color: rgba(58, 66, 73, 0.4); /* DARK GREY. Transparency. */ /* PAGE BG, TEXT. */ border: 1px solid rgb(255, 255, 255) !important; /* WHITE. */ -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; padding: 11px 0px 11px 10px !important; margin-top: 1em; margin-bottom: 0em; color: rgb(255, 255, 255); /* WHITE. */ -webkit-transition: background-color 150ms ease-out; -moz-transition: background-color 150ms ease-out; transition: background-color 150ms ease-out; box-sizing:border-box; /* Too avoid the email field being too long. */ -moz-box-sizing:border-box; } input[type="text"]:focus, input[type="password"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="time"]:focus, input[type="url"]:focus, textarea:focus { background-color: rgba(58, 66, 73, 0.1); /* DARK GREY. Transparency. */ /* PAGE BG, TEXT. */ border: 1px solid rgb(255, 255, 255); /* WHITE. */ -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; margin-top: 1em; margin-bottom: 0em; color: rgb(255, 255, 255); /* WHITE. */ } /* Creates anchor for user in field (Standard Browsers). Also remove blue border around (FF etc). */ input:focus { outline: none; border-width: 0px; -webkit-box-shadow: none; box-shadow: none; } /* Select style: Style the select field with container around select field. */ .select-style { padding: 0; margin: 0; border: 1px solid rgb(255, 255, 255); /* WHITE. */ overflow: hidden; background-color: rgba(58, 66, 73, 0.4); /* DARK GREY. Transparency. */ /* PAGE BG, TEXT. */ position: relative; margin-top: 11px; /* 1em = 16px - 5px = 11px */ margin-bottom: 0em; } .select-style:hover { background-color: rgba(58, 66, 73, 0.1); /* DARK GREY. Transparency. */ /* PAGE BG, TEXT. */ border: 1px solid rgb(255, 255, 255); /* WHITE. */ } /* The new arrow. */ .select-style:after { top: 6px; right: 10px; border: solid transparent; content: " "; position: absolute; pointer-events: none; z-index: 100; background: url(images/white-dropdown-arrow.png); background-repeat: no-repeat; width: 20px; height: 20px; } /* Removing the existing arrow and changing the select box itself. */ #theme-page .select-style select, .select-style select { background: none; border-width: 0; padding: 9px 0px 9px 10px; font-family: 'Roboto', sans-serif; font-weight: 400; font-size: 14px; color: rgb(255, 255, 255); /* WHITE. */ width: 100%; /* This is to remove the browser dropdown arrow. */ background-image: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } /* Add background to the dropdown select options as they are shown as white on Chrome and Explorer on PC. */ select option { background-color: rgba(58, 66, 73, 0.4); /* DARK GREY. Transparency. */ /* PAGE BG, TEXT. */ } /* Textarea 100%w wide. */ textarea { width: 100%; border: 1px solid rgb(255, 255, 255); /* WHITE. */ } textarea:focus { background-color: rgba(58, 66, 73, 0.1); /* DARK GREY. Transparency. */ /* PAGE BG, TEXT. */ border: 1px solid rgb(255, 255, 255); /* WHITE. */ } ::-webkit-input-placeholder { color: rgb(255, 255, 255); /* WHITE. */ /* overwrite browser. */ font-weight: 400; } :-moz-placeholder { /* Firefox 18- */ color: rgb(255, 255, 255); /* WHITE. */ /* overwrite browser. */ font-weight: 400; } ::-moz-placeholder { /* Firefox 19+ */ color: rgb(255, 255, 255); /* WHITE. */ /* overwrite browser. */ font-weight: 400; } :-ms-input-placeholder { color: rgb(255, 255, 255); /* WHITE. */ /* overwrite browser. */ font-weight: 400; } /* General defined with generic button. Set width to 100%. Here more details and changes. */ #contact_form1 .button { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 19px; width: 100%; margin-top: 0; margin-bottom: 25px; margin-top: 20px; background-color: rgb(237, 112, 37); /* ORANGE. */ /* HEADING FIRST WORD, BUTTON. */ color: rgb(255, 255, 255); /* WHITE. */ border: 1px solid rgb(255, 255, 255); /* WHITE. */ width: 75%; } #contact_form1 .button:hover, #contact_form1 .button:active, #contact_form1 .button:focus { background-color: rgb(251, 228, 187); /* ORANGE LIGHT. */ color: rgb(58, 66, 73); /* DARK GREY. */ /* PAGE BG, TEXT. */ } /* Disclaimer text. */ .disclaimerText p { font-family: 'Roboto', sans-serif; font-weight: 400; font-size: 12px; margin-bottom: 7px; padding-left: 20px; padding-right: 20px; } /* Form error messages. */ form label.error { font-family: 'Roboto', sans-serif; font-weight: 500; color: rgb(237, 112, 37); /* ORANGE. */ /* HEADING FIRST WORD, BUTTON. */ background-color: white; padding: 3px 10px 3px 10px; } /* END FORM - REGISTER YOUR INTEREST. ====================================================================================================================== */ /* SKIPLINKS 508 REQUIREMENTS - ACCESSIBILITY ====================================================================================================================== */ .skiplist { margin: 0; padding: 0 } .skip { display: none; text-align: left; margin: 0; padding: 0; position: absolute } /*All incl Opera*/ /* * html */ .skip {display: block} /*Seen by IE*/ .skip { display: block } /*Seen by Moz, FF and Safari*/ .skip a { padding: 0 0.5em; display: inline; z-index: 2; text-decoration:none; position: absolute; width: 14em; left: -200em; } .skip a:focus, .skip a:active { position: absolute; left: 0.5em; } .skip a:hover { cursor: default } /* MEDIA QUERIES ====================================================================================================================== */ /* All above is mobile first. */ /* 320px = 20em 480px = 30em 640px = 40em 768px = 48em 940px = 58.75em 960px = 60em 992px = 62em 1024px = 64em 1440px = 90em 1920px = 120em */ /* Main breakpoints for Jupiter theme seem to be at 767/768px and 991px/992px */ /* Navigation breakpoint set to 11120px in theme options, so 1121px is still showing full nav. */ /* Small screens: above 320px = 20em (inclusive 320px). */ @media only screen and (min-width: 20em) { /* ------------ GENERAL. ------------ */ /* ------------ END GENERAL. ------------ */ /* ------------ TYPOGRAPHY. ------------ */ /* ------------ END TYPOGRAPHY. ------------ */ /* ------------ HEADER. ------------ */ /* ------------ END HEADER. ------------ */ /* ------------ NAVIGATION. ------------ */ /* ------------ END NAVIGATION. ------------ */ /* ------------ HERO SLIDER & HERO IMAGES. ------------ */ /* ------------ END HERO SLIDER & HERO IMAGES. ------------ */ /* ------------ HOME. ------------ */ /* ------------ END HOME. ------------ */ /* ------------ PAGES. ------------ */ /* ------------ END PAGES. ------------ */ /* ------------ BLOG PAGES. ------------ */ /* ------------ END BLOG PAGES. ------------ */ /* ------------ LIGHBOX/GALLERY IMAGES. ------------ */ /* ------------ END LIGHBOX/GALLERY IMAGES. ------------ */ /* ------------ FOOTER. ------------ */ /* ------------ END FOOTER. ------------ */ /* ------------ FORM - REGISTER YOUR INTEREST. ------------ */ /* ------------ END FORM - REGISTER YOUR INTEREST. ------------ */ } /* XSmall screens: above 320px = 20em (inclusive 320px). */ @media only screen and (min-width: 20em) { /* ------------ HOME. ------------ */ /* Middle row: Price points - prices themselves. */ #middleRowPricePoints .pricePoints { font-size: 80px; } #middleRowPricePoints .pricePoints .dollarSign { font-size: 76px; } /* Middle row: Price points - the apartment type. */ #middleRowPricePoints .apartmentsStyle { font-size: 20px; margin-left: 4%; margin-right: 4%; } /* ------------ END HOME. ------------ */ /* ------------ PAGES. ------------ */ /* THUMB SLIDERS. */ /* Mobile first: Need to set height for thumb sliders. Assign class to row for each in Jupiter and set height appropriately -> there will be larger gap on smaller devices between breakpoints. */ .allThumbSlider .ls-fullscreen-wrapper, .allThumbSliderGrey .ls-fullscreen-wrapper { height: 265px; } /* ------------ END PAGES. ------------ */ } /* Above 375px (23.4375em)*/ @media only screen and (min-width: 23.4375em) { /* ------------ PAGES. ------------ */ /* THUMB SLIDERS. */ /* Mobile first: Need to set height for thumb sliders. Assign class to row for each in Jupiter and set height appropriately -> there will be larger gap on smaller devices between breakpoints. */ .allThumbSlider .ls-fullscreen-wrapper, .allThumbSliderGrey .ls-fullscreen-wrapper { height: 290px; } /* ------------ END PAGES. ------------ */ } /* Above 415px -> 479px (25.9375em)*/ @media only screen and (min-width: 25.9375em) { /* ------------ PAGES. ------------ */ /* THUMB SLIDERS. */ /* Mobile first: Need to set height for thumb sliders. Assign class to row for each in Jupiter and set height appropriately -> there will be larger gap on smaller devices between breakpoints. */ .allThumbSlider .ls-fullscreen-wrapper, .allThumbSliderGrey .ls-fullscreen-wrapper { height: 330px; } /* ------------ END PAGES. ------------ */ } /* XSmall screens: above 480px = 30em (inclusive 480px). */ @media only screen and (min-width: 30em) { /* ------------ HOME. ------------ */ /* Middle row: Price points - prices themselves. */ #middleRowPricePoints .pricePoints { font-size: 80px; } #middleRowPricePoints .pricePoints .dollarSign { font-size: 76px; } /* Middle row: Price points - the apartment type. */ #middleRowPricePoints .apartmentsStyle { font-size: 22px; margin-left: 18%; margin-right: 18%; } /* ------------ END HOME. ------------ */ /* ------------ PAGES. ------------ */ /* THUMB SLIDERS. */ /* Mobile first: Need to set height for thumb sliders. Assign class to row for each in Jupiter and set height appropriately -> there will be larger gap on smaller devices between breakpoints. */ .allThumbSlider .ls-fullscreen-wrapper, .allThumbSliderGrey .ls-fullscreen-wrapper { height: 440px; } /* ------------ END PAGES. ------------ */ /* ------------ FOOTER. ------------ */ /* Mobile first: The Retina logo in the center column with various sizes on different devices. */ #mk-footer #media_image-3 img { max-width: 60% !important; } /* ------------ END FOOTER. ------------ */ /* ------------ FORM - REGISTER YOUR INTEREST. ------------ */ /* Set the width of the form for various devices. */ #bottomRowForm .mk-grid .formBlock { width: 85%; } /* ------------ END FORM - REGISTER YOUR INTEREST. ------------ */ } /* Medium screens: above 640px = 40em (inclusive 640px). */ @media only screen and (min-width: 40em) { /* ------------ HOME. ------------ */ /* Middle row: Price points - prices themselves. */ #middleRowPricePoints .pricePoints { font-size: 80px; } #middleRowPricePoints .pricePoints .dollarSign { font-size: 76px; } /* Middle row: Price points - the apartment type. */ #middleRowPricePoints .apartmentsStyle { font-size: 22px; margin-left: 26%; margin-right: 26%; } /* ------------ END HOME. ------------ */ /* ------------ PAGES. ------------ */ /* THUMB SLIDERS. */ /* Mobile first: Need to set height for thumb sliders. Assign class to row for each in Jupiter and set height appropriately -> there will be larger gap on smaller devices between breakpoints. */ .allThumbSlider .ls-fullscreen-wrapper, .allThumbSliderGrey .ls-fullscreen-wrapper { height: 520px; } /* ------------ END PAGES. ------------ */ /* ------------ FOOTER. ------------ */ /* Mobile first: The Retina logo in the center column with various sizes on different devices. */ #mk-footer #media_image-3 img { max-width: 50% !important; } /* ------------ END FOOTER. ------------ */ /* ------------ FORM - REGISTER YOUR INTEREST. ------------ */ /* Set the width of the form for various devices. */ #bottomRowForm .mk-grid .formBlock { width: 65%; } /* ------------ END FORM - REGISTER YOUR INTEREST. ------------ */ } /* Apartment Plans change from tabs to slider on 765px/766px (47.8125/47.875). */ @media only screen and (min-width: 47.875em) { /* ------------ TYPOGRAPHY. ------------ */ /* The text for each individual apartment inside the slider. Small after breakpoint from tabs to slider and larger later. */ .aptTypeText, .aptTypeList { font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: 8px; } /* But the headings to be bold again. */ .aptTypeText .aptTypeTextBold { font-weight: 700; } /* ------------ END TYPOGRAPHY. ------------ */ } /* MAIN BREAKPOINT CHANGE. */ /* XMedium screens: above 768px = 48em (inclusive 768px). */ @media only screen and (min-width: 48em) { /* ------------ TYPOGRAPHY. ------------ */ /* Mobile first: Developer: Finbar: The text on the left of the developers page to be larger. */ .largeBlueText p { font-size: 23px; } /* Footer fonts & COntact page as well. */ /* Sales agent texts individually. Also for CONTACT page. */ #mk-footer p.salesEmail, .contactSalesAgent p.salesEmail { font-size: 9px; font-weight: 400; } #mk-footer p.salesNumber, .contactSalesAgent p.salesNumber { font-size: 24px; font-weight: 700; } /* ------------ END TYPOGRAPHY. ------------ */ /* ------------ HOME. ------------ */ /* Middle row: Price points - prices themselves. */ #middleRowPricePoints .pricePoints { font-size: 48px; } #middleRowPricePoints .pricePoints .dollarSign { font-size: 46px; } /* Middle row: Price points - the apartment type. */ #middleRowPricePoints .apartmentsStyle { font-size: 12px; margin-left: 0%; margin-right: 0%; } /* COUNTER & SEAL. Position the counter and the seal. */ .sealImage, .counterSold { margin-top: 70px; margin-bottom: 25px; } /* ------------ END HOME. ------------ */ /* ------------ PAGES. ------------ */ /* The columns inside .threeInARow with padding left and right. Even for mobiles and adjusted when in a row on larger devices. */ .threeInARow .leftCol { padding-left: 15px !important; padding-right: 10px !important; } .threeInARow .middleCol { padding-left: 12px !important; padding-right: 12px !important; } .threeInARow .rightCol { padding-left: 10px !important; padding-right: 15px !important; } /* LIFESTYLE. */ /* Mobile first: The columns need to be stacked differently - 2 next to each other on smaller devices. */ .legendCol.vc_col-sm-3 { width: 25%; } /* The icons in five columns on the Lifestyle page. */ /* Mobile first: Make thoe icons smaller on mobile devices. -> later again 100% and padding on grid to indent left and right. */ .fiveColumns .mk-grid .wpb_single_image img { max-width: 100%; } /* The icons: Mobile first: Indent left and right on the grid for the icons. */ .fiveColumns .mk-grid { padding-left: 120px; padding-right: 120px; } /* PANORAMA 360 VIEWER. */ /* Mobile first: Original size set in theme. Adjust height accordingly for different devices. */ .panorama360.panorama360 { height: 400px !important } /* APARTMENTS. */ /* Amenities. Mobile first: Content column Amenities - indent left and right. */ .amenitiesContent { padding-left: 15px; padding-right: 15px; } /* Reduce the content logo and margin below the logo to fit it all in above main breakpoint. */ .amenitiesContent .oneKennedyAmenitiesLogo { margin-bottom: 20px; } .amenitiesContent .oneKennedyAmenitiesLogo img { width: 80%; } /* ------------ END PAGES. ------------ */ /* ------------ FOOTER. ------------ */ /* Mobile first: The Retina logo in the center column with various sizes on different devices. */ #mk-footer #media_image-3 img { max-width: 45% !important; } /* Mobile first sub footer: Set height and place line pattern graphic (has bottom space for grey to shine through). Various height. */ #sub-footer { height: 190px; } /* Mobile first: Style similar to main nav - just the border bottom is different (no animation). Change font size later. */ #mk-footer-navigation > ul li a { font-size: 12px; } /* Mobile first. Change later. */ #mk-footer-navigation > ul li { margin-left: 0px !important; margin-right: 0px !important; } /* ------------ END FOOTER. ------------ */ /* ------------ FORM - REGISTER YOUR INTEREST. ------------ */ /* Set the width of the form for various devices. */ #bottomRowForm .mk-grid .formBlock { width: 55%; } /* ------------ END FORM - REGISTER YOUR INTEREST. ------------ */ } /* OLD FOOTER BREAKPOINT CHANGE -> Changed to 940/941. */ /* Up until width of 769px (48.0625em)*/ @media only screen and (min-width: 48.0625em) { /* ------------ PAGES. ------------ */ /* THUMB SLIDERS. */ /* Mobile first: Need to set height for thumb sliders. Assign class to row for each in Jupiter and set height appropriately -> there will be larger gap on smaller devices between breakpoints. */ .allThumbSlider .ls-fullscreen-wrapper, .allThumbSliderGrey .ls-fullscreen-wrapper { height: 595px; } /* ------------ END PAGES. ------------ */ } /* Above 880px. */ @media only screen and (min-width: 880px) { /* ------------ TYPOGRAPHY. ------------ */ /* The text for each individual apartment inside the slider. Small after breakpoint from tabs to slider and larger later. */ .aptTypeText, .aptTypeList { font-size: 9px; } /* ------------ END TYPOGRAPHY. ------------ */ /* ------------ HOME. ------------ */ /* Middle row: Price points - prices themselves. */ #middleRowPricePoints .pricePoints { font-size: 50px; } #middleRowPricePoints .pricePoints .dollarSign { font-size: 46px; } /* Middle row: Price points - the apartment type. */ #middleRowPricePoints .apartmentsStyle { font-size: 13px; margin-left: 6%; margin-right: 6%; } /* ------------ END HOME. ------------ */ /* ------------ PAGES. ------------ */ /* THUMB SLIDERS. */ /* Mobile first: Need to set height for thumb sliders. Assign class to row for each in Jupiter and set height appropriately -> there will be larger gap on smaller devices between breakpoints. */ .allThumbSlider .ls-fullscreen-wrapper, .allThumbSliderGrey .ls-fullscreen-wrapper { height: 630px; } /* APARTMENTS. */ /* Amenities. Mobile first: Content column Amenities - indent left and right. */ .amenitiesContent { padding-left: 90px; padding-right: 90px; } /* ------------ END PAGES. ------------ */ } /* ALSO MAIN FOOTER BREAKPOINT CHANGE NOW. */ /* XXMedium screens: 941px - 1024px (58.8124em - 64em)*/ @media only screen and (min-width: 58.8125em) { /* ------------ END TYPOGRAPHY. ------------ */ /* Footer fonts. */ /* Sales agent texts individually. */ #mk-footer p.salesName, .contactSalesAgent p.salesName { font-size: 20px; font-weight: 600; } #mk-footer p.salesEmail, .contactSalesAgent p.salesEmail { font-size: 10px; font-weight: 400; } #mk-footer p.salesNumber, .contactSalesAgent p.salesNumber { font-size: 28px; font-weight: 700; } #mk-footer p.salesCompany, .contactSalesAgent p.salesCompany { font-size: 10px; font-weight: 300; } /* ------------ END TYPOGRAPHY. ------------ */ /* ------------ PAGES. ------------ */ /* THUMB SLIDERS. */ /* Mobile first: Need to set height for thumb sliders. Assign class to row for each in Jupiter and set height appropriately -> there will be larger gap on smaller devices between breakpoints. */ .allThumbSlider .ls-fullscreen-wrapper, .allThumbSliderGrey .ls-fullscreen-wrapper { height: 665px; } /* LIFESTYLE. */ /* The icons: Mobile first: Indent left and right on the grid for the icons. */ .fiveColumns .mk-grid { padding-left: 190px; padding-right: 190px; } /* APARTMENTS. */ /* Amenities. Mobile first: Content column Amenities - indent left and right. */ .amenitiesContent { padding-left: 120px; padding-right: 120px; } /* Reduce the content logo and margin below the logo to fit it all in above main breakpoint. */ .amenitiesContent .oneKennedyAmenitiesLogo { margin-bottom: 30px; } .amenitiesContent .oneKennedyAmenitiesLogo img { width: 90%; } /* ------------ END PAGES. ------------ */ /* ------------ FOOTER. ------------ */ /* Mobile first: Columns inside footer to collapse earlier when smaller screen. */ #mk-footer .mk-col-1-4 { width: 25%; } /* ------------ FOOTER. ------------ */ /* Mobile first: The Retina logo in the center column with various sizes on different devices. */ #mk-footer #media_image-3 img { max-width: 80% !important; } /* Mobile first: The SOCIAL ICONS floating inside the widget. */ /* Smaller devices to have all centered and above breakpoint float what's required. */ .footerFinbar { float: left; margin-right: 10px; margin-left: 15%; /* To equalise that it is not centered anymore. */ } .social-footer { float: left; } .fbook, .insta { margin-bottom: 10px; } /* ------------ END FOOTER. ------------ */ /* ------------ FORM - REGISTER YOUR INTEREST. ------------ */ /* Set the width of the form for various devices. */ #bottomRowForm .mk-grid .formBlock { width: 43%; } /* ------------ END FORM - REGISTER YOUR INTEREST. ------------ */ } /* Above 960px. */ @media only screen and (min-width: 961px) { /* ------------ PAGES. ------------ */ /* AMENITIES ROW. */ /* Mobile first: Change indent for amenities box. */ .theme-page-wrapper:not(.full-width-layout) .attched-true.vc_row.amenitiesRow { margin-left: -5px !important; margin-right: -5px !important; } /* ------------ END PAGES. ------------ */ } /* Above 992px. */ @media only screen and (min-width: 992px) { /* ------------ END TYPOGRAPHY. ------------ */ /* Footer fonts. */ /* Sales agent texts individually. */ #mk-footer p.salesName { font-size: 21px; font-weight: 600; } #mk-footer p.salesEmail { font-size: 11px; font-weight: 400; } #mk-footer p.salesNumber { font-size: 30px; font-weight: 700; } #mk-footer p.salesCompany { font-size: 11px; font-weight: 300; } /* ------------ END TYPOGRAPHY. ------------ */ /* ------------ HOME. ------------ */ /* Middle row: Price points - prices themselves. */ #middleRowPricePoints .pricePoints { font-size: 60px; } #middleRowPricePoints .pricePoints .dollarSign { font-size: 56px; } /* Middle row: Price points - the apartment type. */ #middleRowPricePoints .apartmentsStyle { font-size: 15px; margin-left: 6%; margin-right: 6%; } /* ------------ END HOME. ------------ */ /* ------------ PAGES. ------------ */ /* THUMB SLIDERS. */ /* Mobile first: Need to set height for thumb sliders. Assign class to row for each in Jupiter and set height appropriately -> there will be larger gap on smaller devices between breakpoints. */ .allThumbSlider .ls-fullscreen-wrapper, .allThumbSliderGrey .ls-fullscreen-wrapper { height: 687px; } /* ------------ END PAGES. ------------ */ } /* Large screens: 1025px - 1200px (64.0625em - 75em)*/ @media only screen and (min-width: 64.0625em) { /* ------------ TYPOGRAPHY. ------------ */ /* The text for each individual apartment inside the slider. Small after breakpoint from tabs to slider and larger later. */ .aptTypeText, .aptTypeList { font-size: 10px; } /* ------------ END TYPOGRAPHY. ------------ */ /* ------------ HOME. ------------ */ /* Middle row: Price points - prices themselves. */ #middleRowPricePoints .pricePoints { font-size: 66px; } #middleRowPricePoints .pricePoints .dollarSign { font-size: 62px; } /* Middle row: Price points - the apartment type. */ #middleRowPricePoints .apartmentsStyle { font-size: 17px; margin-left: 1%; margin-right: 1%; } /* ------------ END HOME. ------------ */ /* ------------ PAGES. ------------ */ /* THUMB SLIDERS. */ /* Mobile first: Need to set height for thumb sliders. Assign class to row for each in Jupiter and set height appropriately -> there will be larger gap on smaller devices between breakpoints. */ .allThumbSlider .ls-fullscreen-wrapper, .allThumbSliderGrey .ls-fullscreen-wrapper { height: 800px; } /* LIFESTYLE. */ /* The icons: Mobile first: Indent left and right on the grid for the icons. */ .fiveColumns .mk-grid { padding-left: 250px; padding-right: 250px; } /* PANORAMA 360 VIEWER. */ /* Mobile first: Original size set in theme. Adjust height accordingly for different devices. */ .panorama360.panorama360 { height: 550px !important } /* APARTMENTS. */ /* On the apartment slider and there on the main floor plates only, have the background circle icon. */ p.textButton { background-image: url(images/icon-circle-small-forward.png); background-repeat: no-repeat; background-position: right center; } /* Amenities. Mobile first: Content column Amenities - indent left and right. */ .amenitiesContent { padding-left: 180px; padding-right: 180px; } /* Reduce the content logo and margin below the logo to fit it all in above main breakpoint. */ .amenitiesContent .oneKennedyAmenitiesLogo { margin-bottom: 35px; margin-top: 20px; } .amenitiesContent .oneKennedyAmenitiesLogo img { width: 100%; } /* DEVELOPER & Contact. */ /* The third columns holding the logo/images to have padding left on larger devices to equalise the columns visually. */ .colLeft10 { padding-left: 5%; } /* On Contact some left and right columns. */ .colRight10 { padding-right: 5%; } /* ------------ END PAGES. ------------ */ /* ------------ FOOTER. ------------ */ /* Mobile first sub footer: Set height and place line pattern graphic (has bottom space for grey to shine through). Various height. */ #sub-footer { height: 190px; } /* Mobile first: Style similar to main nav - just the border bottom is different (no animation). Change font size later. */ #mk-footer-navigation > ul li a { font-size: 14px; } /* Mobile first. Change later. */ #mk-footer-navigation > ul li { margin-left: 10px !important; margin-right: 10px !important; } /* ------------ END FOOTER. ------------ */ /* ------------ FORM - REGISTER YOUR INTEREST. ------------ */ /* Set the width of the form for various devices. */ #bottomRowForm .mk-grid .formBlock { width: 40%; } /* ------------ END FORM - REGISTER YOUR INTEREST. ------------ */ } /* Large screens: 1201px - 1297px (75.0625em - 81.0625em)*/ @media only screen and (min-width: 75.0625em) { /* ------------ HOME. ------------ */ /* Middle row: Price points - prices themselves. */ #middleRowPricePoints .pricePoints { font-size: 80px; } #middleRowPricePoints .pricePoints .dollarSign { font-size: 76px; } /* Middle row: Price points - the apartment type. */ #middleRowPricePoints .apartmentsStyle { font-size: 21px; margin-left: 0%; margin-right: 0%; } /* ------------ END HOME. ------------ */ /* ------------ PAGES. ------------ */ /* THUMB SLIDERS. */ /* Mobile first: Need to set height for thumb sliders. Assign class to row for each in Jupiter and set height appropriately -> there will be larger gap on smaller devices between breakpoints. */ .allThumbSlider .ls-fullscreen-wrapper, .allThumbSliderGrey .ls-fullscreen-wrapper { height: 850px; } /* LIFESTYLE. */ /* The icons: Mobile first: Indent left and right on the grid for the icons. */ .fiveColumns .mk-grid { padding-left: 290px; padding-right: 290px; } /* APARTMENTS. */ /* Amenities. Mobile first: Content column Amenities - indent left and right. */ .amenitiesContent { padding-left: 240px; padding-right: 240px; } /* Reduce the content logo and margin below the logo to fit it all in above main breakpoint. */ .amenitiesContent .oneKennedyAmenitiesLogo { margin-top: 50px; } /* ------------ END PAGES. ------------ */ } /* 1298px and above (81.125em)*/ @media only screen and (min-width: 81.125em) { /* ------------ PAGES. ------------ */ /* THUMB SLIDERS. */ /* Mobile first: Need to set height for thumb sliders. Assign class to row for each in Jupiter and set height appropriately -> there will be larger gap on smaller devices between breakpoints. */ .allThumbSlider .ls-fullscreen-wrapper, .allThumbSliderGrey .ls-fullscreen-wrapper { height: 850px; } /* AMENITIES. */ /* Reduce the content logo and margin below the logo to fit it all in above main breakpoint. */ .amenitiesContent .oneKennedyAmenitiesLogo { margin-top: 70px; } /* ------------ END PAGES. ------------ */ } /* XLarge screens: 1441px - 1920px (90.0625em - 120em) */ @media only screen and (min-width: 90.0625em) { /* ------------ HOME. ------------ */ #middleRowPricePoints .pricePoints { font-size: 80px; } #middleRowPricePoints .pricePoints .dollarSign { font-size: 76px; } /* Middle row: Price points - the apartment type. */ #middleRowPricePoints .apartmentsStyle { font-size: 22px; margin-left: 2%; margin-right: 2%; } /* ------------ END HOME. ------------ */ /* ------------ PAGES. ------------ */ /* PANORAMA 360 VIEWER. */ /* Mobile first: Original size set in theme. Adjust height accordingly for different devices. */ .panorama360.panorama360 { height: 659px !important } /* ------------ END PAGES. ------------ */ } /* XXLarge screens: 1921px (120.0625em) */ @media only screen and (min-width: 120.0625em) { } /* MEDIA QUERIES FOR STANDARD DEVICES - PORTARIT AND LANDSCAPE. */ /* ----------- iPhone 4 and 4S ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { } /* Portrait */ @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) { /* ------------ PAGES. ------------ */ /* THUMB SLIDERS. */ /* Mobile first: Need to set height for thumb sliders. Assign class to row for each in Jupiter and set height appropriately -> there will be larger gap on smaller devices between breakpoints. */ .allThumbSlider .ls-fullscreen-wrapper, .allThumbSliderGrey .ls-fullscreen-wrapper { height: 230px; } /* ------------ END PAGES. ------------ */ } /* Landscape */ @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { /* ------------ PAGES. ------------ */ /* THUMB SLIDERS. */ /* Mobile first: Need to set height for thumb sliders. Assign class to row for each in Jupiter and set height appropriately -> there will be larger gap on smaller devices between breakpoints. */ .allThumbSlider .ls-fullscreen-wrapper, .allThumbSliderGrey .ls-fullscreen-wrapper { height: 335px; } /* ------------ END PAGES. ------------ */ } /* ----------- iPhone 5, 5S, 5C and 5SE ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) { } /* Portrait */ @media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) { /* ------------ PAGES. ------------ */ /* THUMB SLIDERS. */ /* Mobile first: Need to set height for thumb sliders. Assign class to row for each in Jupiter and set height appropriately -> there will be larger gap on smaller devices between breakpoints. */ .allThumbSlider .ls-fullscreen-wrapper, .allThumbSliderGrey .ls-fullscreen-wrapper { height: 230px; } /* ------------ END PAGES. ------------ */ } /* Landscape */ @media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { /* ------------ PAGES. ------------ */ /* THUMB SLIDERS. */ /* Mobile first: Need to set height for thumb sliders. Assign class to row for each in Jupiter and set height appropriately -> there will be larger gap on smaller devices between breakpoints. */ .allThumbSlider .ls-fullscreen-wrapper, .allThumbSliderGrey .ls-fullscreen-wrapper { height: 390px; } /* ------------ END PAGES. ------------ */ } /* ----------- iPhone 6, 6S, 7 and 8 ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) { } /* Portrait */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) { /* ------------ PAGES. ------------ */ /* THUMB SLIDERS. */ /* Mobile first: Need to set height for thumb sliders. Assign class to row for each in Jupiter and set height appropriately -> there will be larger gap on smaller devices between breakpoints. */ .allThumbSlider .ls-fullscreen-wrapper, .allThumbSliderGrey .ls-fullscreen-wrapper { height: 265px; } /* ------------ END PAGES. ------------ */ } /* Landscape */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { /* ------------ PAGES. ------------ */ /* THUMB SLIDERS. */ /* Mobile first: Need to set height for thumb sliders. Assign class to row for each in Jupiter and set height appropriately -> there will be larger gap on smaller devices between breakpoints. */ .allThumbSlider .ls-fullscreen-wrapper, .allThumbSliderGrey .ls-fullscreen-wrapper { height: 460px; } /* ------------ END PAGES. ------------ */ } /* ----------- iPhone 6+, 7+ and 8+ ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) { } /* Portrait */ @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) { /* ------------ PAGES. ------------ */ /* THUMB SLIDERS. */ /* Mobile first: Need to set height for thumb sliders. Assign class to row for each in Jupiter and set height appropriately -> there will be larger gap on smaller devices between breakpoints. */ .allThumbSlider .ls-fullscreen-wrapper, .allThumbSliderGrey .ls-fullscreen-wrapper { height: 290px; } /* ------------ END PAGES. ------------ */ } /* Landscape */ @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) { /* ------------ PAGES. ------------ */ /* THUMB SLIDERS. */ /* Mobile first: Need to set height for thumb sliders. Assign class to row for each in Jupiter and set height appropriately -> there will be larger gap on smaller devices between breakpoints. */ .allThumbSlider .ls-fullscreen-wrapper, .allThumbSliderGrey .ls-fullscreen-wrapper { height: 500px; } /* ------------ END PAGES. ------------ */ } /* ----------- iPhone X ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) { } /* Portrait */ @media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) { /* ------------ PAGES. ------------ */ /* THUMB SLIDERS. */ /* Mobile first: Need to set height for thumb sliders. Assign class to row for each in Jupiter and set height appropriately -> there will be larger gap on smaller devices between breakpoints. */ .allThumbSlider .ls-fullscreen-wrapper, .allThumbSliderGrey .ls-fullscreen-wrapper { height: 265px; } /* ------------ END PAGES. ------------ */ } /* Landscape */ @media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) { /* ------------ PAGES. ------------ */ /* THUMB SLIDERS. */ /* Mobile first: Need to set height for thumb sliders. Assign class to row for each in Jupiter and set height appropriately -> there will be larger gap on smaller devices between breakpoints. */ .allThumbSlider .ls-fullscreen-wrapper, .allThumbSliderGrey .ls-fullscreen-wrapper { height: 550px; } /* ------------ END PAGES. ------------ */ } /*END MEDIA QUERIES ====================================================================================================================== */