@import url("base.css");

:root {
    --body-color: #262626 !important;
    --body-font-size: 16px !important;
    --body-font-weight: 300 !important;

    --link-color: #2C3D8D !important;
    --link-hover-color: #508c8c !important;

    --cassiopeia-color-primary: #2C3D8D !important;
    --cassiopeia-color-secondary: #508c8c !important;
    --cassiopeia-color-link: #2C3D8D !important;
    --cassiopeia-color-hover: #508c8c !important;

    --cassiopeia-font-family-body: "Raleway", sans-serif !important;
    --cassiopeia-font-weight-normal: 400 !important;
    --cassiopeia-font-family-headings: "Varta", sans-serif !important;
    --cassiopeia-font-weight-headings: 700 !important;
    
    --mqs-border: 10px solid var(--cassiopeia-color-primary);
}


/* HTML TAGS/GENERIC CLASSES */
b, strong {
	font-weight: 500;
}

button:not(.separator), .btn, .btn-primary, .cf-btn {
    transition: all 400ms;
}

button:not(.separator):hover, button:not(.separator):focus, .btn:hover, .btn:focus, .btn-primary:hover, .btn-primary:focus, .cf-btn:hover, .cf-btn:focus {
    border-color: var(--cassiopeia-color-primary) !important;
    background: white !important;
    color: var(--cassiopeia-color-primary) !important;
    text-decoration: none !important;
}

.btn-alt {
  background: transparent !important;
  border: 1px solid white !important;
}

.btn-alt:hover, .btn-alt:focus {
  border: 1px solid white !important;
}


h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
    color: var(--cassiopeia-color-primary);
}

h6 a, .h6 a, h5 a, .h5 a, h4 a, .h4 a, h3 a, .h3 a, h2 a, .h2 a, h1 a, .h1 a {
  text-decoration: none !important;
}

.homepage-content .i51imagecontentrows .imagecontentrow .rowtext h2,
.fields-container .image-and-content-rows .row:not(.flex-row-reverse) h2 {
    color: white;
}

main > div > h1 {
    margin-top: 20px;
}

/* NAVBAR */
header.container-header {
	background-color: white !important;
	border-bottom: 1px solid #eee;
}

header .container-topbar {
	background-color: var(--cassiopeia-color-primary) !important;
	padding: 0;
	font-size: 16px;
}

header.container-header .container-menuwrap {
    padding: .25em .5em !important;
}

header .container-topbar .moduletable {
	max-width: 1320px;
	margin: 0 auto;
	text-align: right;
	padding: 5px 15px;
}

header.container-header .container-menuwrap .navbar-brand .brand-logo img {
	max-width: 160px;
}

header.container-header .container-menuwrap {
	padding: .7em .5em;
}

header.container-header .metismenu.mod-menu .metismenu-item > span,
header.container-header .metismenu.mod-menu .metismenu-item > a, 
header.container-header .metismenu.mod-menu .metismenu-item > button {
	color: var(--cassiopeia-color-primary) !important;
	font-weight: 500;
	font-family: var(--cassiopeia-font-family-headings);
	font-size: 20px;
}

.field-entry.gallery {
    margin-top: 20px;
}

/* FIELD - HERO IMAGE */

.com-content-article ul.fields-container {
  overflow: visible;
}

.field-entry.hero-image {
  margin-bottom: 40px !important;
}

.field-entry.hero-image .page-header p {
  font-size: 2.5rem;
  font-family: var(--cassiopeia-font-family-headings);
  font-weight: var(--cassiopeia-font-weight-headings);
}

.field-entry.hero-image .hero-image-background {
  width: 100vw;
  left: calc(-50vw + 50%);
  position: relative;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: scroll;
  min-height: 600px;
  display: flex;
  align-items: end;
  background-color: #edf2f8;
}

.field-entry.hero-image .hero-image-background.small {
  min-height: 300px;
}

.field-entry.hero-image .overlaycontent {
	width: 100%;
	max-width: 1320px;
	margin: 0 auto;
	padding: 20px 10px;
	font-size: 20px;
	margin-bottom: 50px;
	text-shadow: 0px 0px 3px black;
}

.field-entry.hero-image .hero-image-background.small .overlaycontent {
  margin-bottom: 30px;
}

.field-entry.hero-image .overlaycontent {
  text-align: center;
  z-index: 2;
}

.field-entry.hero-image .overlaycontent > * {
  color: white;
}

.field-entry.hero-image .overlaycontent .page-header {
    max-width: 100% !important;
}

.field-entry.hero-image .overlaycontent a {
  color: white;
}

.field-entry.hero-image .hero-image-background.white .overlaycontent > *,
.field-entry.hero-image .hero-image-background.white .overlaycontent a {
  color: white !important;
}

.field-entry.hero-image .hero-image-background {
  background-position: bottom 25% center;
}

.field-entry.hero-image .hero-image-icon {
  max-width: 80px;
  padding-bottom: 10px;
  display: none;
}

/* TOP BANNER */

.carousel-caption {
	right: 0;
	left: unset;
	bottom: 30%;
	top: unset;
	background: rgba(44, 61, 141, 0.5);
	padding-top: 0;
	max-width: 900px;
}

.carousel-caption h2 {
    background: white;
    text-align: left;
    color: var(--cassiopeia-color-primary);
    padding: 10px;
    font-weight: bold;
}

.carousel-caption p:not(:empty) {
    padding: 10px;
    text-align: left;
}

.carousel-caption p:empty {
    display: none;
}

.carousel-caption a.btn {
    background: transparent !important;
    border: 1px solid white !important;
    border-radius: 0 !important;
    color: white !important;
}

.carousel-caption a.btn:hover {
    background: white !important;
    color: var(--cassiopeia-color-primary) !important;
}

/* BODY */

.grid-child.container-sidebar-right {
	padding-top: 45px;
}
.container-sidebar-right h3 {
	padding: 0;
}


.com-content-article.item-page > .page-header,
.com-content-article.item-page .com-content-article__body {
    border-left: var(--mqs-border);
    padding: 10px 20px;
}

.i51imagecontentrows .rowtext {
    color: white !important;
    background-color: var(--cassiopeia-color-primary) !important;
}

.recent-projects-title {
    padding: 35px 0;
    max-width: 1360px;
    margin-left: auto;
    margin-right: auto;
}

.recent-projects-title .mod-custom {
    border-left: var(--mqs-border);
    padding: 20px;
    margin: 10px 20px;
}

.recent-projects .mod-articles-items {
    --grid-layout-gap: 0px;
}

.recent-projects .mod-articles-items .mod-articles-item .mod-articles-item-content {
    position: relative;
}

.recent-projects .mod-articles-items > li {
    margin-top: -8px;
}

.recent-projects .mod-articles-items .mod-articles-item .mod-articles-item-content .mod-articles-title {
    position: absolute;
    bottom: -20px;
    margin: 0;
    opacity: 0;
    background: rgba(44, 61, 141, 0.5);
    width: 100%;
    transition: all 400ms;
}

.recent-projects .mod-articles-items .mod-articles-item .mod-articles-item-content .mod-articles-title a {
    color: white !important;
    width: 100%;
    display: block;
    position: relative;
    padding: 20px;
}

.recent-projects .mod-articles-items .mod-articles-item:hover .mod-articles-item-content .mod-articles-title {
    bottom: 0;
    opacity: 1;
}

.recent-projects .mod-articles-items .mod-articles-item .mod-articles-item-content .readmore {
    display: none;
}

.recent-projects .mod-articles-items .mod-articles-item .mod-articles-item-content figure {
    margin: 0;
}

.recent-projects .mod-articles-items .mod-articles-item .mod-articles-item-content figure img {
    height: 350px;
    object-fit: cover;
}

.services-buttons ul {
	display: flex;
	flex-wrap: wrap;
}

.services-buttons ul li {
	flex-grow: 1;
	padding: 5px;
	flex-basis: 30%;
	text-align: center;
	display: flex;
}

.services-buttons ul li a {
	border: 1px solid;
	border-color: white !important;
	background: transparent !important;
	color: white !important;
	transition: all 400ms;
	border-radius: 5px;
	padding: 10px 15px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.services-buttons ul a:hover, .services-buttons ul a:focus{
    border-color: var(--cassiopeia-color-primary) !important;
    background: white !important;
    color: var(--cassiopeia-color-primary) !important;
    text-decoration: none !important;
}

/* SERVICES BLOG LAYOUT */
.com-content-category-blog .blog-items[class*=" columns-"] .blog-item .item-content .page-header {
	text-align: center;
	margin-bottom: 30px;
}

.com-content-category-blog .blog-items[class*=" columns-"]  .blog-item .page-header h2 a {
    color: var(--text-colour);
    text-decoration: none !important;
}

.com-content-category-blog .blog-items[class*=" columns-"]  .blog-item .page-header img {
    max-width: 100px;
    margin: 30px 0;
    height: 100px;
}

.com-content-category-blog .blog-items[class*=" columns-"] .blog-item .item-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	text-align: center;
	color: var(--text-colour) !important;
	padding: 30px 20px;
}

.com-content-category-blog .blog-items[class*=" columns-"] .blog-item .item-content .readmore {
	margin-top: 20px;
}

.com-content-category-blog .blog-items[class*=" columns-"] .blog-item .item-content .readmore a {
	border-color: var(--text-colour) !important;
	color: var(--text-colour) !important;
	background: transparent !important;
}

.com-content-category-blog .blog-items[class*=" columns-"]  .blog-item .item-content .readmore a:hover {
    color: var(--cassiopeia-color-primary) !important;
    background: white !important;
    border-color: white !important;
}

.blog-items .blog-item .item-image img, figure.newsflash-image img {
    left: 0;
}

/* BOTTOM BANNER */

.reviews-rotator {
    background-image: url(../images/hidden-house-bedrooms-area.jpg);
    background-repeat: no-repeat;
    background-position: center;
    padding: 50px;
    background-size: cover;
    margin-top: 40px;
}

.reviews-rotator .mod_submissions_carousel .carousel-caption {
    color: white;
    background: none;
}

.bottom-banner-content .imagecontentrow {
    flex-direction: row-reverse;
}

.bottom-banner-content .imagecontentrow .rowimage {
    border: 35px solid #edf2f8 !important;
}

.bottom-banner-content .imagecontentrow .rowtext {
    background: #edf2f8 !important;
}

.bottom-banner-content .imagecontentrow .rowtext > div {
    border-left: var(--mqs-border);
    padding: 15px;
    margin-left: 100px;
    color: #212a4b;
}

.call-to-action {
	background-color: #508c8c;
	padding: 30px 10px;
}

.call-to-action .mod-custom {
	color: white;
	max-width: 1320px;
	margin: 0 auto;
}

.call-to-action .mod-custom h3 {
  color: white;
}

.call-to-action p:last-of-type {
  margin-bottom: 0;
}

.field-entry.image-and-content-rows {
    width: 100vw;
    left: calc(-50vw + 50%);
    position: relative;
}

.field-entry.image-and-content-rows .content-row-content {
	align-items: center;
	justify-content: center;
	display: flex;
}

.field-entry.image-and-content-rows .textwrap {
	max-width: 700px;
}

.field-entry.image-and-content-rows .content-row-content {
    background-color: #30448c;
    color: white;
}

.field-entry.image-and-content-rows .flex-row-reverse .content-row-content {
    background-color: #f4f4f4;
    color: var(--body-color);
}

.field-entry.image-and-content-rows > .row > .col-sm-12 > img {
    width: 100%;
}

.field-entry.row-icon {
    width: 100vw;
    left: calc(-50vw + 50%);
    position: relative;
    background-color: #508c94;
}

.field-entry.row-icon > .row {
    max-width: 1320px;
    margin: auto;
    padding: 10px 0;
}

.field-entry.row-icon > .row img {
    max-width: 80px;
    margin-top: 15px;
}

.field-entry.row-icon > .row .col-12 > * {
    margin-bottom: 20px;
    color: white;
    text-align: center;
}

.field-entry.tabs-accordions {
    margin-top: 60px;
}

.field-entry.tabs-accordions .fields-container {
    border-left: var(--mqs-border);
    padding: 15px;
}

div[data-rlta-element='button'] {
    border-radius: 0 !important;
    background-color: #f8f4f4 !important;
    color: black !important;
    border-color: #f8f4f4 !important;
}

div[data-rlta-element='button']:hover,
div[aria-expanded='true'][data-rlta-element='button'] {
    background-color: #e6e8ec !important;
}

div[data-rlta-element='panel'] {
    border-color: #f8f4f4 !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

.moduletable.reviews-rotator {
    position: relative;
}

.moduletable.reviews-rotator::after {
    content: "";
    background: rgba(0,0,0,0.25);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

.moduletable.reviews-rotator h3 {
    color: white !important;
    position: relative;
    z-index: 2;
}

.moduletable.reviews-rotator .mod_submissions_carousel {
    position: relative;
    z-index: 2;
}

.moduletable.reviews-rotator .mod_submissions_carousel .carousel-item .carousel-caption p {
    font-size: 22px;
    font-style: italic;
}

.mod_submissions_carousel .carousel-item .carousel-caption p:last-child {
	font-size: 17px !important;
	font-style: unset !important;
}

/* FOOTER */

footer {
    padding: 0 60px;
}

/* RESPONSIVE DESIGN */

@media (max-width: 992px) {
    .carousel-caption {
        bottom: 0;
        max-width: 100%;
    }
    
    .services-buttons ul {
        columns: 1;
    }
    
    .recent-projects .mod-articles-items .mod-articles-item .mod-articles-item-content .mod-articles-title {
        bottom: 0;
        opacity: 1;
    }
    
    .i51imagecontentrows .rowtext,
    .bottom-banner-content .imagecontentrow .rowtext > div {
        padding: 0;
        margin: 0;
        border: none;
    }
    
    .carousel.mod_submissions_carousel {
        padding: 0;
        max-width: 100%;
    }
    
    .container-header .navbar-collapse {
        top: 105px;
    }
    
    header.container-header .metismenu.mod-menu .metismenu-item > span, header.container-header .metismenu.mod-menu .metismenu-item > a, header.container-header .metismenu.mod-menu .metismenu-item > button {
        color: white !important;
    }
    
    header.container-header .container-menuwrap .navbar-brand .brand-logo img {
        max-width: 140px;
    }
    
    .container-topbar p {
        font-size: 14px !important;
    }
}

@media (max-width: 900px) {
    .services-buttons ul li {
        flex-basis: 100%;
    }
}

@media (max-width: 768px) {
    .bottom-banner-content .imagecontentrow {
        flex-direction: column;
    }
    
    .i51imagecontentrows .rowimage {
        min-height: 250px;
        order: 1;
    }
    
    footer .footer-left {
        border: none !important;
    }
    
    .carousel-caption {
        position: relative;
        background: rgba(44, 61, 141, 1);
        display: none;
    }
    
}

@media (max-width: 600px) {
    .imagecontentrow {
        flex-direction: column;
    }
}

@container (width>=768px) {
    .mod-articles-grid {
        grid-template-columns: 2fr 2fr;
    }
}

@container (width>=600px) {
    .mod-articles-grid {
        grid-template-columns: 1fr 1fr;
    }
}