/* CSS Document */

/*===== REFERENCE VALUES =====
Font Brown - #99612f
Font Grey - #787976
Font Blue - #385a6d
Sage Green - #a8b192
Dark Blue - #113448
background color #fbfbfb

*/



/*===== GUIDES ===== 
.showborderred    {border: 2px solid red; }
.showborderaqua   {border: 1px solid aqua; }
.showbordergreen  {border: 2px solid green; }
.showborderblack  {border: 2px solid black; }
.showborderorange {border: 1px solid orange; }
  */


/*===== BASE =====*/
*, ::before, ::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0; }

*{
scroll-behavior: smooth !important;
}

ul { list-style: none; }


body {
    background-color: #fbfbfb;
    font-family: 'Open Sans', sans-serif;
/*  overflow-x: hidden; */
}


p {
    color: #787976;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5em;
    margin-bottom: 20px; }


h1 {
    font-family: 'EB Garamond', serif;
    color: #99612f;
    font-size: 38px;
    font-weight: 400;
    margin-bottom: 20px; }


h2 {
    font-family: 'EB Garamond', serif;
    color: #99612f;
    font-size: 26px;
    font-weight: 400;
    margin-bottom: 20px; }


h3 {
    font-family: 'Open Sans', sans-serif;
    color: #385a6d;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px; }
@media (min-width: 600px) { h3 { font-size: 20px; } }


h4 {
    font-family: 'Open Sans', sans-serif;
    color: #385a6d;
    font-style: italic;
    font-size: 16px;
    font-weight: 600; 
    line-height: 1.6em; }
@media (min-width: 600px) { h4 { font-size: 16px; } }



h5 {
    color: #6f6f6e;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5em;
    margin-bottom: 12px; }



.text-align-centre { text-align: center; }




.first-level-list-ul {
    list-style: outside;
    margin-left: 50px; }

.first-level-list-li {
    color: #787976;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5em;
    margin-top: .8em; }



.second-level-list-ul {
    list-style: outside;
    margin-left: 50px; }

.second-level-list-li {
    color: #787976;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5em;
	margin-top: 0;
	list-style-type: circle; }







a { text-decoration: none;
    color: #787976; }

img { vertical-align: middle; border-style: none; max-width: 100%; height: auto; }
.img-fluid { max-width: 100%; height: auto; }






header    {  }
section   {  }
footer    { background: #113448; }
container { display: block; width: 100%; }
row       { display: block; width: 100%; }



/*-------- CLASSES FOR SECTIONS ---------*/


.introduction { margin: 60px 0 80px 0; }
.locations { margin: 60px 0 60px 0; }
.latest-projects { margin: 60px 0 60px 0; }
.contact-us { margin: 40px 0 40px 0; }
.fullwidthcontent-top { margin: 40px 0 0 0; }
.fullwidthcontent-bottom { margin: 0 0 40px 0; }
.about { margin: 40px 0 40px 0; }
.newcrematorium { margin: 80px 0 40px 0; }

.hero { }
.offers { }
.mission { }
.projects { }


/*-------- PROJECT SECTIONS ---------*/
.section-about { margin: 40px 0 0 0; }
.section-introduction { margin: 0 0 60px 0; }
.section-design { margin: 60px 0 40px 0; }
.section-gallery { margin: 0 0 40px 0; }
.section-environment { margin: 0 0 40px 0; }
.section-access { margin: 0 0 60px 0; }
.section-comments { }
.section-chosen { margin-top: 100px; }
.section-technical { margin: 40px 0 40px 0; }



.heroshape-home {
    position: relative;
    width: 100%;
    height: 60vh;
    background: url("/images/header-background.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center; }
@media (min-width: 920px) {
.heroshape-home {
    min-height: 100vh;  }
}

.heroshape-contact {
    width: 100%;
    height: 60vh;
    background: url("../images/bannersm001.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    clip-path: polygon(0% 0%,100% 0%,100% 80%,50% 100%,0% 80%) }
@media (min-width: 600px) { .heroshape-contact { min-height: 66vh; }
}

.heroshape-news {
    width: 100%;
    height: 60vh;
    background: url("../images/bannersm002.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    clip-path: polygon(0% 0%,100% 0%,100% 80%,50% 100%,0% 80%) }
@media (min-width: 600px) { .heroshape-news { min-height: 66vh; }
}

.heroshape-orsett {
    width: 100%;
    height: 60vh;
    background: url("../../images/projectimages/bannersm003.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    clip-path: polygon(0% 0%,100% 0%,100% 80%,50% 100%,0% 80%) }
@media (min-width: 600px) { .heroshape-orsett { min-height: 66vh; }
}

.heroshape-maidenhead {
    width: 100%;
    height: 60vh;
    background: url("../../images/projectimages/bannersm004.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    clip-path: polygon(0% 0%,100% 0%,100% 80%,50% 100%,0% 80%) }
@media (min-width: 600px) { .heroshape-maidenhead { min-height: 66vh; }
}


.heroshape-congleton {
    width: 100%;
    height: 60vh;
    background: url("../../congleton-crematorium/assets/bannersm005.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    clip-path: polygon(0% 0%,100% 0%,100% 80%,50% 100%,0% 80%) }
@media (min-width: 600px) { .heroshape-congleton { min-height: 66vh; }
}



/*--------  CONTAINERS ---------*/

.container-headline { 
    max-width: 400px;
    margin-right: auto;
    margin-left: auto;
    padding: 40px;
    text-align: center;
    margin-bottom: 60px; }
@media (min-width: 920px) {
.container-headline {
    max-width: 700px;
    margin-bottom: 200px;}
}





.container-wide {
    max-width: 1200px;
    margin-right: auto;
    margin-left: auto;
    padding: 40px; }

.container-narrow {
    max-width: 800px;
    margin-right: auto;
    margin-left: auto;
    padding: 40px;
    text-align: center; }

.container-narrow p {
    color: #dfe5ec;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5em;
    margin-bottom: 20px; }

.container-othercrems {
    max-width: 1200px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 40px; }

.container-fullimage {
    max-width: 1200px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 40px; }


.columns-responsive-around {
    display: flex;
    flex-wrap: wrap;
    /*align-items: center;*/
    justify-content: space-around; }
@media (min-width: 1048px) { .columns-responsive-around { justify-content: space-around; } }


.columns-responsive-between-centered {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around; }
@media (min-width: 1140px) { .columns-responsive-between-centered { justify-content: space-between; } }





.columns-responsive-between {
    max-width: 1200px;
    margin-right: auto;
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
	padding: 0 40px;}
@media (min-width: 1190px) { .columns-responsive-between { justify-content: space-between; } }




.contentbox-3images {
	max-width: 620px;
	width: 100%;
	height: auto; }


@media (min-width: 980px) { .contentbox-3images { max-width: 440px; } }
@media (min-width: 1190px) { .contentbox-3images { max-width: 360px; } }




















.columns-alignright {
    display: flex;
    flex-direction: row-reverse; }

.columns-alignleft {
    display: flex; }

@media (max-width: 980px) {
.column-reverse {
    display: flex;
    flex-direction: column-reverse; } 
}



.columns-2 { display: flex; flex-wrap: wrap; justify-content: space-between; }
@media (min-width: 1200px) { .columns-2 { flex-wrap: nowrap; } }

.imageblock-right { width: 100%; height: auto; margin: 0; }
@media (min-width: 1200px) { .imageblock-right { max-width: 560px; /*margin: 0 0 0 20px;*/ } }

.textblock-left { width: 100%; margin: 0; }
@media (min-width: 1200px) { .textblock-left { max-width: 540px; margin: 0 20px 0 0; } }



.gallery { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.gallerythumb { width: 100%; max-width: 800px; margin-bottom: 20px; border: 1px solid #aab190; }
@media (min-width: 1200px) { .gallerythumb { max-width: 554px; margin-bottom: 0; } }






/*-------- STRUCTURAL ELEMENTS ---------*/

.statement1 {
    /*max-width: 740px;*/
    padding: 0 10px 0 10px;
    margin-right: auto;
    margin-left: auto; }
.statement1 h4 { text-align: center; }

.statement2 {
    /*max-width: 980px;*/
    padding: 0 10px 0 10px;
    margin-right: auto;
    margin-left: auto; }
.statement2 h4 { text-align: center; }

.statement3 {
    /*max-width: 980px;*/
    padding: 0 10px 0 10px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}


.text-box {
    max-width: 420px;
    width: 100%;
    padding: 30px 0; }

.image-box {
    max-width: 620px;
    width: 100%;
    border-radius: 5px; }



.halfsize-contentbox {
    max-width: 520px;
    width: 100%;
    margin-bottom: 40px; }

.thirdsize-contentbox {
    max-width: 370px;
    padding: 0 40px 0px 40px;
    margin: 40px 0 0 0;
    text-align: center; }

.thirdsize-contentbox-othercrems {
    max-width: 370px;
    padding: 0 40px 0px 40px;
    text-align: center; }



.halfsize-sectionbox {
    /*display: inline-block;*/
    width: 100%; }
@media (min-width: 980px) {
.halfsize-sectionbox {
    width: 50%; } }


.sectionbox-image {
    background: url(../../images/projectimages/sectionimage_left.jpg) center center no-repeat;
    background-size: cover; }

.sectionbox-text {
    width: 100%;
    padding: 30px 100px 10px 100px; }
@media (min-width: 980px) { .sectionbox-text { max-width: 600px; } }



.sectionbox-text-project {
    width: 100%;
    padding: 10px 40px 10px 40px; }
@media (min-width: 980px) { .sectionbox-text-project { max-width: 600px; } }

.bgimage-right {
    background-image: url(../../images/projectimages/sectionimage01a.jpg);
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; }

.bgimage-left {
    background-image: url(../../images/projectimages/sectionimage02a.jpg);
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; }

.thurrock-bgimage-right {
    background-image: url(../../images/projectimages/thurrock-section1.jpg);
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; }

.thurrock-bgimage-left {
    background-image: url(../../images/projectimages/thurrock-section2.jpg);
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; }


.congleton-bgimage-right {
    background-image: url(../../congleton-crematorium/assets/location-right.jpg);
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; }

.congleton-bgimage-left {
    background-image: url(../../congleton-crematorium/assets/location-left.jpg);
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; }





.home-bgimage-left {
    background-image: url(../../images/sectionimage-home01.jpg);
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; }

.home-bgimage-right {
    background-image: url(../../images/sectionimage-home02.jpg);
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; }




.contact-details {
    display: block;
    margin-left: 30px; }




.container-columns {
	max-width: 1200px;
    margin-right: auto;
    margin-left: auto;
	padding: 40px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center; }
@media (min-width: 980px) { .container-columns { flex-wrap: nowrap; } }


.contentbox-left {
	max-width: 620px;
	width: 100%;
	height: auto;
/*	background-color: aquamarine;*/
	padding-right: 0; }
@media (min-width: 980px) { .contentbox-left { 	padding-right: 40px; max-width: 558px; } }


.contentbox-right {
	max-width: 620px;
	width: 100%;
	height: auto;
/*	background-color: burlywood;*/
	padding-left: 0; }
@media (min-width: 980px) { .contentbox-right { padding-left: 40px; max-width: 558px; } }






.pd-right-40 { padding-right: 40px; }







/*-------- DESIGN ELEMENTS ---------*/


.shape-hexagon {
    background: url(../images/hexagon-green.svg) center center no-repeat;
    height: 110px;
    width: 110px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hexagon-icons {
    max-width: 40px; }

.pagetop {
    /*padding: 20px;
    background: #5B2728;*/
    margin-top: -100px;
    position: absolute;
    width: 100%; }



.othercrem {
	width: 100%;
	max-width: 240px; }



.othercrem-congleton {
	width: 100%;
	max-width: 280px; }




/* ===== FOOTER STYLES ==== */


.footerlinks-box {
    width: 300px;
    height: 240px;
    padding-left: 20px;
    margin: 20px 0 10px 0;
    border-left: 3px solid #fff;
    text-align: left; }

.footerlinks-box h2 {
    color: #fff; }

.footerlinks-box p {
    color: #fff;
    font-size: 14px;
    line-height: 1.8em; }

.socialmediaicons {
    display: flex;
    flex-direction: row; }

.socialring {
    margin: 0 12px 0 0;
    width: 34px;
    height: 34px;
    border: 1px solid #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0; }

.footer-signoff { font-size: 12px; color:#dfe5ec; text-align: center; }

/* unvisited link */
footer a:link { color: #fff; text-decoration: none; }
/* visited link */
footer a:visited { color: #fff; text-decoration: none; }
/* mouse over link */
footer a:hover { color: #f0aec6; text-decoration: none; }
/* selected link */
footer a:selected { color: #f0aec6; text-decoration: none; }







/* ===== BUTTON STYLES ==== */
.button-main {
    background-color: #a8b192;
    border: 1px solid #a8b192;
    border-radius: 4px;
    padding: 10px 20px 10px 20px;
    color: #34333a;
    text-align: center;
    text-decoration: none;
    font-size: 13px;
    text-transform: uppercase;
    color: #fff;
    transition-duration: 0.3s;
    cursor: pointer;
    display: inline-block;
    /*box-shadow: 1px 2px 8px #888888; */ }

.button-main:hover {
    background-color: #7c836c; }

.button-right {
    text-align: right; }

.button-left {
    text-align: left;
}







/* ===== TABLE STYLES ==== */
table {
    width: 100%;
    /*border: 1px solid #fff;*/
    margin: 10px 0 10px 0;
    text-align: left;
    color: #fff;
    font-size: 12px;
    font-weight: 400; }

td {
   /* border-top: 1px dashed #fff; */
   /* padding-top: 5px; */
    padding-right: 10px;
    padding-bottom: 3px;
    padding-left: 0px; }



/* ===== LIST STYLES ==== */
.list-unstyled {
    padding-left: 0;
    list-style: none;
}




.gallery-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
}

.gallery-item {
	max-width: 512px;
	width: 100%;
}



.mt-negative30 { margin-top: -30px; }