@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;700&display=swap'); /* font-family: 'Poppins', sans-serif; */ @import url("reset.css"); @import url("support.css"); @import url("forms.css"); @import url("fontawesome/css/all.css"); :root{ --layer-1-bg: #ffffff; --layer-1-fg: #666666; --layer-1-text: #666666; --layer-1-active-bg: #ed1c24; --layer-1-active-fg: #ffffff; --light-bg: #eeeeee; --light-fg: #666666; --blue-bg: #a4d9f8; --blue-fg: #333333; } html{ height: 100%; font-size: 16px; scroll-behavior: smooth; } body{ position: relative; min-height: 100%; margin: 0; padding: 0; color: var(--layer-1-text); font-family: 'Poppins', sans-serif; font-size: 1rem; font-weight: 300; } ol li{ margin: 0 0 5px; } *+br{ display: none; visibility: hidden; } a,input{ transition: all 0.6s; } h1{ margin: 0 0 2rem; color: var(--layer-1-text); font-size: 3rem; font-weight: 300; line-height: 4rem; } h2{ margin: 0 0 2rem; color: var(--layer-1-text); font-size: 2.5rem; font-weight: 400; line-height: 3rem; } h3{ margin: 0 0 1.5rem; color: var(--layer-1-text); font-size: 1.6rem; font-weight: 400; line-height: 2rem; } h4{ margin: 0 0 1.5rem; color: var(--layer-1-text); font-size: 1.6rem; font-weight: 400; line-height: 2rem; } /* LAYOUT */ #parent{ position: relative; display: block; width: 100%; max-width: 2000px; min-height: 100vh; margin: 0 auto; padding: 0 0 52px; } .hideforload{ display: none !important; visibility: hidden !important; } .mobile{ display: none; } .inner{ clear: both; display: block; width: 100%; max-width: 1360px; margin-left: auto !important; margin-right: auto !important; padding-left: 30px; padding-right: 30px; } .inner.articlewidth{ max-width: 760px; } .columns{ overflow: hidden; } .columns .col{ float: left; } .columns .col.right{ float: right; } .columns .col.quarter{ width: 25%; } .columns .col.threequarters{ width: 75%; } .columns .col.half{ width: 50%; } .columns .col.third{ width: 33%; } .columns .col.twothirds{ width: 66%; } .columns .col.sixty{ width: 60%; } .columns .col.forty{ width: 40%; } .columns .col.full{ clear: both; width: 100%; } .columns .col>img{ display: block; width: 100%; } .padleft{ padding-left: 2rem; } .padleft.smallpad{ padding-left: 1rem; } .padleft.bigpad{ padding-left: 4rem; } .padright{ padding-right: 2rem; } .padright.smallpad{ padding-right: 1rem; } .padright.bigpad{ padding-right: 4rem; } .padbottom{ padding-bottom: 2rem; } .padbottom.smallpad{ padding-bottom: 1rem; } .padbottom.bigpad{ padding-bottom: 4rem; } .padtop{ padding-top: 2rem; } .padtop.smallpad{ padding-top: 1rem; } .padtop.bigpad{ padding-top: 4rem; } .tabs{ display: block; margin-bottom: 20px; border-bottom: solid 1px #cccccc; } .tabs a{ display: inline-block; margin: 0 0 -1px 0; padding: 10px 30px; background-color: #eeeeee; color: #666666; border: solid 1px #cccccc; border-radius: 2px 2px 0 0; font-size: 14px; font-weight: 700; text-decoration: none; text-transform: uppercase; } .tabs a.selected{ background-color: var(--layer-1-fg); color: var(--layer-1-bg); border: solid 1px #cccccc; border-bottom: solid 1px var(--layer-1-fg); } .tab{ } .tab .note{ margin-bottom: 30px; font-size: 14px; } /* BANNERS */ .pagebanner{ display: block; width: 100%; margin: 0 0; padding: 0 0 60vh; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } /* LISTS */ .thumblist{ display: block; margin: 0 0 30px; padding: 0; column-count: 3; column-gap: 1em; list-style: none; } .thumblist li{ display: block; margin: 0 0 1em; } .thumblist li a{ display: block; text-decoration: none; } .thumblist li a .image{ display: block; margin: 0 0 10px; padding: 0 0 56%; background-position: center; background-size: cover; } .thumblist li a .title{ display: block; margin: 0 0 10px; } .thumblist li a .summary{ display: block; margin: 0 0 10px; } /* HEADER AND NAVIGATION */ #header{ position: relative; z-index: 1001; background-color: #ffffff; box-shadow: 0 0 1rem rgba(0,0,0,0.3); } #header .inner{ display: flex; align-items: center; justify-content: space-between; } #header #logo{ display: block; padding: 0; } #header #logo img{ display: block; width: 100%; max-width: 250px; } #header #logo:hover{ } #scrollmeasure{ position: absolute; left: 0; top: 50px; display: block; width: 1px; height: 1px; } .socialnav{ } .socialnav>li{ } .socialnav>li a{ } .socialnav>li a:hover{ } #langnav{ } #langnav>li{ display: inline-block; margin: 0 1px 0 0; } #langnav>li a{ display: block; padding: 5px; } #langnav>li a:hover{ opacity: 0.5; } #mainnav{ display: flex; justify-content: flex-end; } #mainnav>li{ } #mainnav>li>a{ position: relative; display: block; padding: 2rem 1rem; color: var(--layer-1-text); font-weight: 500; text-decoration: none; } #mainnav>li>a:after{ content: ''; position: absolute; left: 50%; bottom: 0; right: 0; display: block; height: 4px; width: 0%; background-color: var(--layer-1-active-bg); transform: translateX(-50%); transition: all 0.6s; } #mainnav>li>a:not(.selected):hover{ color: var(--layer-1-active-bg); } #mainnav>li>a:not(.selected):hover:after{ width: 100%; } #mainnav>li.selected>a,#mainnav>li>a.selected{ color: var(--layer-1-active-bg); } #mainnav>li.selected>a:after,#mainnav>li>a.selected:after{ width: 100%; } #mainnav>li.flag{ } #mainnav>li.flag>a{ } #mainnav>li.flag>a:hover{ } #mainnav>li>ul{ position: absolute; left: 0; top: 60px; z-index: 1000; display: block; width: 200px; max-height: 0px; overflow: hidden; transition: all 0.75s; } #mainnav>li:hover>ul{ max-height: 1000px; background-color: var(--layer-1-bg); color: var(--layer-1-fg); box-shadow: 0 0 15px rgba(0,0,0,0.5); } #mainnav>li>ul>li{ display: block; } #mainnav>li>ul>li>a{ } #mainnav>li>ul>li>a:hover{ } #mainnav>li>ul>li>a.selected{ } /* SOCIAL NAV */ .socialnav{ display: flex; align-items: center; gap: 1rem; margin: 0; padding: 0; list-style: none; } .content .socialnav{ margin: 0; list-style: none; } .socialnav li{ } .socialnav li a{ color: var(--layer-1-active-bg); } .socialnav li a .fab{ transition: all 1s; } .socialnav li a:hover .fab{ transform: rotateY(360deg); } .socialnav.big li a{ font-size: 2rem; } .contactbar .socialnav li a{ color: var(--layer-1-active-fg); font-size: 1.5rem; } /* FOOTER */ #footercntr{ position: absolute; left: 0; bottom: 0; display: block; width: 100% !important; margin: 0px auto 0 !important; background-color: var(--layer-1-active-fg); background-color: #ffffff; box-shadow: 0 0 1rem rgba(0,0,0,0.3); } #footer{ display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 0 auto; padding: 1rem 0; overflow: hidden; } #footer p{ margin: 0; padding: 0px; font-size: 0.8rem; } #footer p.copyright{ } #footer p.credit{ } #footer p a{ } #footer p a:hover{ } #footer p a img{ vertical-align: -6px; } /* DISPLAY PANE */ #displaypane{ position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 100000000; display: block; padding: 30px; background-color: var(--layer-1-fg); overflow: auto; overflow-x: none; } #displaypane>.close{ position: absolute; right: 20px; top: 15px; color: #cccccc; font-size: 48px; } #displaypane>.close:hover{ color: var(--layer-1-bg); } #displaypane #innerpane{ position: absolute; left: 30px; top: 60px; right: 30px; bottom: 60px; background-position: center; background-repeat: no-repeat; background-size: contain; } /* MOBILENAV */ a#mobilenavlink{ position: absolute; right: 20px; top: 10px; z-index: 20000000; display: none; width: 45px; padding: 5px; } a#mobilenavlink:after{ content: ''; } a#mobilenavlink>span{ display: block; height: 8px; margin: 0 0 3px; background-color: var(--layer-1-active-bg); border-radius: 2px; } #mobilenav{ position: absolute; right: 0; top: 0px; z-index: 10000000; display: block; width: 250px; height: 100vh; padding: 100px 0 10px; background-color: var(--layer-1-bg); box-shadow: 0 0 30px rgba(0,0,0,0.3); } #mobilenav li{ display: block; margin: 0 0 1px; } #mobilenav li a{ display: block; margin: 0 0px; padding: 0.6rem 1.5rem; background-color: var(--layer-1-bg); color: var(--layer-1-fg); text-align: right; text-decoration: none; } #mobilenav li a:hover{ background-color: var(--layer-1-active-bg); color: var(--layer-1-active-fg); } #mobilenav li.selected>a,#mobilenav li a.selected{ background-color: var(--layer-1-active-bg); color: var(--layer-1-active-fg); } #mobilenav>li>ul{ display: block; margin: 1px 0 1px 30px; } #mobilenav li.flag>a{ border: none; text-align: left; } #mobilenav li.flag>a>img{ display: inline-block; } /* TINYMCE ASSIGNED CLASSES */ .alignleft{ text-align: left; } .alignright{ text-align: right; } .aligncentre{ text-align: center; } .alignfull{ text-align: justify; } /* IMGPOOL CLASSES */ img.imgpoolinline{ display: inline-block; margin: 10px; vertical-align: middle; } img.imgpoolleft{ float: left; margin: 0 20px 10px 0; } img.imgpoolright{ float: right; margin: 0 0 10px 20px; } img.imgpoolblock{ display: block; max-width: 100%; margin: 0 auto 10px; } img.bordered{ border: solid 1px; } /* DOCPOOL CLASSES */ a.docbutton{ display: inline-block; margin: 0 0.2rem; padding: 0.1rem 0.6rem; background-color: var(--layer-1-bg); color: var(--layer-1-fg) !important; border-radius: 3px; font-size: 0.8rem; text-align: center; text-decoration: none !important; text-transform: uppercase; vertical-align: 1px; } a.docbutton:hover{ background-color: var(--layer-1-text); color: var(--layer-1-fg); } a.docbigbutton{ display: inline-block; padding: 5px 10px; background-color: var(--layer-1-bg); color: var(--layer-1-fg); border: solid 1px var(--layer-1-bg); border-radius: 2px; text-decoration: none; } a.docbigbutton span{ display: block; } a.docbigbutton span.title{ text-transform: uppercase; } a.docbigbutton span.description{ font-size: 11px; } a.docbigbutton:hover{ background-color: var(--layer-1-fg); color: var(--layer-1-bg); } /* SLIDER STYLES */ #slider{ display: block; width: 100%; box-shadow: 0 0 60px rgba(0,0,0,0.3); overflow: hidden; } #slider li{ position: relative; display: block; width: 100%; height: 0; padding: 0 0 60vh; background-position: center top; background-repeat: no-repeat; background-size: cover; overflow: hidden; } #slider a.navarrow{ position: absolute; top: 45%; z-index: 1000000; display: block; background-color: var(--layer-1-bg); color: var(--layer-1-fg); font-size: 1rem; text-decoration: none; } #slider a.navarrow:hover{ background-color: var(--layer-1-text); } #slider a.cycle-prev{ left: 0px; padding: 0.5rem 0.8rem 0.5rem 1.2rem; border-radius: 0 3px 3px 0; } #slider a.cycle-prev:hover{ padding: 0.5rem 1.2rem 0.5rem 0.8rem; } #slider a.cycle-next{ right: 0px; padding: 0.5rem 1.2rem 0.5rem 0.8rem; border-radius: 3px 0 0 3px; } #slider a.cycle-next:hover{ padding: 0.5rem 0.8rem 0.5rem 1.2rem; } #slider p.content{ position: absolute; left: 30vw; top: 15vh; right: 30vw; z-index: 1000; display: flex; flex-direction: column; align-items: center; padding: 2rem; background-color: rgba(255,255,255,0.2); border-radius: 4px; box-shadow: 0 0 30px rgba(0,0,0,0.8); backdrop-filter: blur(5px); text-align: center; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); } #slider p.content .title{ display: block; margin: 0 0 1.5rem; color: var(--layer-1-fg); font-size: 1.4rem; font-weight: 400; } #slider p.content .description{ display: block; margin: 0 0 0; color: var(--layer-1-fg); font-size: 0.7rem; font-weight: 300; line-height: 1.2rem; } #slider p.content a{ display: inline-block; padding: 5px 10px; background-color: var(--layer-1-bg); color: var(--layer-1-fg); text-decoration: none; } #slider .cycle-pager{ position: absolute; left: 0; bottom: 0px; right: 0; z-index: 1000; display: flex; justify-content: center; } #slider .cycle-pager span{ flex-basis: 100%; height: 1rem; background-color: var(--layer-1-bg); color: var(--layer-1-bg); cursor: pointer; overflow: hidden; transition: all 0.3s; } #slider .cycle-pager span:hover{ background-color: var(--layer-1-text); color: var(--layer-1-text); } #slider .cycle-pager span.cycle-pager-active{ background-color: var(--layer-1-text); color: var(--layer-1-text); } /* CONTENT */ #maincontent{ padding: 4rem 0 0; } body.homepage #maincontent{ padding: 0 0 0; } body.default #maincontent{ position: relative; box-shadow: 0 0 1rem rgba(0,0,0,0.3); } .contactbar{ display: block; padding: 4rem 0; background-color: var(--layer-1-active-bg); color: var(--layer-1-active-fg); } .contactbar h2{ color: var(--layer-1-active-fg); } .content{ color: var(--layer-1-text); } .content p{ margin: 0 0 25px; font-size: 1rem; line-height: 1.8rem; } .content p br{ display: block !important; visibility: visible !important; } .content p a{ color: var(--layer-1-text); text-decoration: none; } .content p a:hover{ color: var(--layer-1-text); text-decoration: underline; } .content ul{ margin-left: 40px; margin-bottom: 40px; list-style: disc; } .content ul li{ margin: 0 0 20px; font-size: 1rem; line-height: 1.2rem; } .centre{ text-align: center; } .mappane{ display: block; margin: 40px 0; } .mappane iframe{ display: block; width: 100% !important; } a.buttonlink{ display: inline-block; margin: 0; padding: 0.6rem 1.5rem; background-color: var(--layer-1-active-bg); color: var(--layer-1-active-fg); border-radius: 2px; font-size: 0.8rem; text-align: center; text-decoration: none !important; text-transform: uppercase; } a.buttonlink+a.buttonlink{ margin-left: 0.5rem; } a.buttonlink:hover{ background-color: var(--layer-1-active-fg); color: var(--layer-1-active-bg); box-shadow: 0 0 0.5rem rgba(0,0,0,0.3); text-decoration: none; } a.buttonlink .fa{ margin-right: 10px; font-size: 10px; vertical-align: 1px; } .introbar{ display: block; padding: 6rem 0; background-color: var(--blue-bg); color: var(--blue-fg); } .introbar .inner{ display: grid; grid-template-columns: 40% 60%; align-items: center; } .introbar .inner .greeting img{ display: block; max-width: 100%; } /* FEATURED BAR */ #featuredbar{ position: relative; display: block; margin: 0; padding: 4rem 0 0; box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1); } #featuredslider{ display: block; margin: 0; padding: 0; list-style: none; } #featuredslider li{ width: 100%; } #featuredslider li .slide{ display: grid; grid-template-columns: 60% 40%; gap: 0; align-items: center; width: 100%; padding-bottom: 6rem; } #featuredslider li .slide .image{ padding: 0 0 27rem; background-position: center; background-repeat: no-repeat; background-size: cover; } #featuredslider li .slide .details{ padding: 2rem 6rem 2rem 2rem; } #featuredslider li .slide .details .location{ margin: -1rem 0 1rem; font-size: 1rem; font-weight: 500; } #featuredslider li .slide .details .price{ margin: 0 0 1rem; color: var(--layer-1-active-bg); font-size: 1.2rem; font-weight: 500; } #featuredslider li .slide .details .summary{ margin: 0 0 1rem; font-size: 1rem; font-weight: 400; line-height: 1.6rem; } #featuredslider a.navarrow{ position: absolute; top: 33%; z-index: 1000000; display: block; background-color: var(--layer-1-bg); color: var(--layer-1-fg); font-size: 1.5rem; text-decoration: none; } #featuredslider a.navarrow:hover{ background-color: var(--layer-1-active-bg); color: var(--layer-1-active-fg); } #featuredslider a.cycle-prev{ left: 0px; padding: 0.5rem 0.8rem 0.5rem 1.2rem; border-radius: 0 3px 3px 0; } #featuredslider a.cycle-prev:hover{ padding: 0.5rem 1.2rem 0.5rem 0.8rem; } #featuredslider a.cycle-next{ right: 0px; padding: 0.5rem 1.2rem 0.5rem 0.8rem; border-radius: 3px 0 0 3px; } #featuredslider a.cycle-next:hover{ padding: 0.5rem 0.8rem 0.5rem 1.2rem; } #featuredslider .cycle-pager{ position: absolute; left: 0; bottom: 3rem; right: 0; z-index: 1000; display: block; text-align: center; } #featuredslider .cycle-pager span{ display: inline-block; width: 1rem; height: 1rem; margin: 0 0.5rem; background-color: var(--layer-1-text); color: var(--layer-1-text); border-radius: 100%; cursor: pointer; overflow: hidden; text-align: center; transition: all 0.6s; } #featuredslider .cycle-pager span:hover{ background-color: var(--layer-1-active-bg); color: var(--layer-1-active-bg); } #featuredslider .cycle-pager span.cycle-pager-active{ width: 3rem; background-color: var(--layer-1-active-bg); color: var(--layer-1-active-bg); border-radius: 1rem; } /* SEARCH APP */ #search{ position: relative; min-height: 500px; padding: 6rem 0 3rem; box-shadow: 0 0 1rem rgba(0,0,0,0.3); } #searchproperties{ position: relative; } #searchproperties h2{ text-align: center; } #searchproperties .filterbar{ display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 0 0 2rem; padding: 1rem 0 2rem; background-color: #ffffff; border-bottom: solid 1px #cccccc; } #searchproperties .filterbar select{ display: block; padding: 0.5rem 1rem; color: var(--layer-1-text); border: solid 1px #cccccc; border-radius: 2px; font-family: 'Poppins', sans-serif; font-size: 1rem; } #searchproperties .filterbar li.orderby{ margin-left: auto; } .resultspane{ display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin: 1rem 0; min-height: 500px; } .resultspane li{ display: block; border-radius: 3px; box-shadow: 0 0 1rem rgba(0,0,0,0.3); overflow: hidden; transition: 0.6s; } .resultspane li:hover{ transform: scale(1.05); } .resultspane li .image{ display: block; padding: 0 0 55%; background-position: center; background-repeat: no-repeat; background-size: cover; } .resultspane li .details{ display: block; padding: 2rem 1rem; } .resultspane li .details .aux{ display: block; margin: 0 0 1rem; font-size: 0.8rem; font-weight: 400; } .resultspane li .details h5{ display: block; margin: 0; font-size: 1.2rem; font-weight: 500; line-height: 1.6rem; } .resultspane li .details .price{ display: block; margin: 0 0 1rem; color: var(--layer-1-active-bg); font-size: 1.1rem; font-weight: 500; } .resultspane li .details .location{ display: block; margin: 0 0 1rem; font-size: 1rem; font-weight: 500; } .resultspane li .actions{ display: block; padding: 0 1rem 1rem; } .resultspane li .actions p{ text-align: right; } .pagination{ display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin: 0 0 1rem; padding: 0 0.5rem; list-style: none; } .pagination li{ } .pagination li.resultsposition{ margin-right: auto; color: #cccccc; font-size: 0.8rem; font-weight: 500; } .pagination li a{ display: block; padding: 0.3rem 0.5rem; color: #cccccc; border: solid 1px #cccccc; font-size: 0.9rem; font-weight: 500; text-decoration: none; } .pagination li a:hover{ color: var(--layer-1-text); border: solid 1px var(--layer-1-text); } .pagination li a.selected{ background-color: var(--layer-1-active-bg); color: var(--layer-1-active-fg); border: solid 1px var(--layer-1-active-bg); } .loader{ position: absolute; inset: 7rem 0 0 0; display: none; align-items: center; justify-content: center; background-color: rgba(255,255,255,0.8); color: var(--layer-1-active-bg); font-size: 2rem; backdrop-filter: blur(2px); } .loader .fa{ animation: loading 1s infinite linear; } .loading .loader{ display: flex; } @keyframes loading{ 0% { color: var(--layer-1-active-bg); transform: rotate(0deg); } 50% { color: var(--layer-1-active-bg); transform: rotate(180deg); } 100%{ color: var(--layer-1-active-bg); transform: rotate(360deg); } } .fade-enter-active, .fade-leave-active{ transition: all 0.6s; } .fade-enter-from, .fade-leave-to{ opacity: 0; } /* PROPERTY PAGE */ .propertypane .auxbar{ display: flex; gap: 3rem; margin: -1rem 0 2rem; font-size: 1.2rem; font-weight: 500; } .propertypane .auxbar .price{ color: var(--layer-1-active-bg); } .propertypane .auxbar .price .suffix{ color: var(--layer-1-text); font-size: 0.9rem; font-weight: 400; } .propertypane .description{ font-size: 1rem; line-height: 1.6rem; } .propertypane .detailspane{ position: relative; display: block; margin: 4rem 0 0; padding: 6rem 0; background-color: var(--light-bg); box-shadow: 0 0 1rem rgba(0,0,0,0.3); } .propertypane .detailspane .inner{ display: grid; grid-template-columns: 40% 55%; gap: 5%; align-items: center; } .propertypane .detailspane .detailslist{ display: block; margin: 0; padding: 0; list-style: none; } .propertypane .detailspane .detailslist>li{ display: flex; align-items: top; gap: 1rem; padding: 1rem; border-bottom: solid 1px #cccccc; font-size: 0.8rem; } .propertypane .detailspane .detailslist>li>label{ flex-basis: 30%; font-weight: 500; } .propertypane .detailspane .detailslist>li>div{ } .propertypane .detailspane .images{ box-shadow: 0 0 1rem rgba(0,0,0,0.3); } #propertyslider{ display: block; margin: 0; padding: 0; list-style: none; } #propertyslider li{ width: 100%; padding: 0 0 60%; background-position: center; background-repeat: no-repeat; background-size: cover; } #propertyslider a.navarrow{ position: absolute; top: 45%; z-index: 1000000; display: block; background-color: var(--layer-1-bg); color: var(--layer-1-fg); font-size: 1.5rem; text-decoration: none; } #propertyslider a.navarrow:hover{ background-color: var(--layer-1-active-bg); color: var(--layer-1-active-fg); } #propertyslider a.cycle-prev{ left: 0px; padding: 0.5rem 0.8rem 0.5rem 1.2rem; border-radius: 0 3px 3px 0; } #propertyslider a.cycle-prev:hover{ padding: 0.5rem 1.2rem 0.5rem 0.8rem; } #propertyslider a.cycle-next{ right: 0px; padding: 0.5rem 1.2rem 0.5rem 0.8rem; border-radius: 3px 0 0 3px; } #propertyslider a.cycle-next:hover{ padding: 0.5rem 0.8rem 0.5rem 1.2rem; } #propertyslider .cycle-pager{ position: absolute; left: 0; bottom: 1rem; right: 0; z-index: 1000; display: block; text-align: center; } #propertyslider .cycle-pager span{ display: inline-block; width: 1rem; height: 1rem; margin: 0 0.5rem; background-color: var(--layer-1-text); color: var(--layer-1-text); border: solid 1px #ffffff; border-radius: 100%; cursor: pointer; overflow: hidden; text-align: center; transition: all 0.6s; } #propertyslider .cycle-pager span:hover{ background-color: var(--layer-1-active-bg); color: var(--layer-1-active-bg); } #propertyslider .cycle-pager span.cycle-pager-active{ width: 3rem; background-color: var(--layer-1-active-bg); color: var(--layer-1-active-bg); border-radius: 1rem; }