/* Define Variables */
:root {
    --primary: #86C641;
    --secondary: #015933;
    --tertiary: #E28222;
    --quaternary: #70A4C7;
    --background1: #E5E5E5;
    --background2: #FFFFFF;
    --text-light: #FFFFFF;
    --text-dark: #000000;
}

/* General Adjustments */
body {
    background-color: var(--background1);
    color: var(--text-dark);
    font-family: 'Poppins', sans-serif;
    min-width: 320px;
}

body.iframe header,
body.iframe #header-top,
body.iframe #header-bottom,
body.iframe #footer-bottom,
body.iframe #footer-top,
body.iframe h1,
body.iframe #contact-blocks {
    display: none;
}

body.iframe .progress-header {
    padding-top: 1rem;
}

/* Buttons */
.btn {
   background-color: var(--secondary);
}

.home-blocks .btn {
    background-color: var(--primary);
}

.composite-address-input .submit-address {
    position: absolute;
    right: 0px;
    top: -3px;
    padding: 11px 10px 9px;
    height: 50px;
    background-color: var(--secondary);
    color: var(--text-light);
}

.composite-address-input .submit-address:hover {
    background-color: var(--tertiary);
}

.markdown-container a:hover {
    color: var(--text-light);
}

#checkout-payment .btn.btn-primary {
    margin-bottom: 16px;
}

#header-top {
    background-color: var(--secondary); /* Secondary color for the header background */
    padding-top: 1px;
    padding-bottom: 1px;
    color: var(--text-light); /* Ensures text remains visible */
}

#header-top .container {
    padding-top: 5px;
    padding-bottom: 5px;
}

#header-top .navbar {
    background-color: var(--secondary); /* Matches the header background */
}

#header-top .navbar .fa-bars:before {
    color: var(--text-light); /* Ensures the menu icon is visible */
}

#header-top .col-12 {
    padding-left: 0;
    padding-right: 0;
}

#header-bottom {
    border-top: 10px solid var(--tertiary);
}

#header-top,
#header-bottom,
#footer-bottom,
#menu {
    color: var(--text-light);
}

.head-contact .block {
    margin-right: 20px;
}

.head-contact img {
    height: 20px;
}

.btn.btn-primary {
    background-color: var(--secondary);
    color: var(--text-light);
}

.btn.btn-primary:hover {
    background-color: var(--tertiary);
    color: var(--text-light);
}

.home-blocks button.incremental-element.btn.narrow:hover {
    color: var(--secondary);
    background-color: var(--text-light);
}

.home-blocks button.incremental-element.btn.narrow {
    color: var(--text-light);
    border: 1px solid var(--text-light);
}

.allowed-tile .btn.narrow:hover {
    background-color: var(--text-light);
    color: var(--secondary);
}

.allowed-tile .btn.narrow {
    background-color: var(--secondary);
    color: var(--text-light);
}

.btn:hover {
    color: var(--text-light);
}

/* Links and Hover States */
.radio-button-strip label span:hover {
    color: var(--text-light);
}

a.btn.card-link:hover {
    color: var(--text-light);
    background-color: var(--tertiary);
}

a.btn.card-link {
    color: var(--text-light);
    border: 1px solid var(--text-light);
}

/* Primary Color Usage */
.primary-tile,
.list-panel a,
.btn,
.markdown-container a,
.radio-button-strip label span,
body .custom-calendar table.calendar-table td.today,
.composite-address-input .postcode-input,
.address-results label:hover,
.dialog-panel h3,
.btn.call-to-action:hover,
.radio-button-strip label span.call-to-action:hover,
.composite-address-input .selected-address-summary,
.custom-calendar table.calendar-table td.isSelectable:hover .dayNum,
h1 .alt, h2 .alt, h3 .alt, h4 .alt, h5 .alt,
.custom-calendar .custom-calendar-nav .custom-calendar-nav-date .month h2,
button.btn.btn-primary:hover,
a.btn.btn-primary:hover,
.btn.btn-primary:hover,
.markdown-container a.btn-primary:hover,
.radio-button-strip label span.btn-primary:hover {
    color: var(--primary);
}

.landing-root .list-panel.yellow,
.landing-root .list-panel,
.btn:hover,
.markdown-container a:hover,
.radio-button-strip label span:hover,
.radio-button-strip label [type=radio]:checked+span,
.radio-button-strip label [type=radio]:active+span,
.radio-button-strip label [type=radio]:focus+span,
body .custom-calendar table.calendar-table td.isSelectable,
.customcheck:checked~.customcheck-o,
.customcheck-label:hover>.customcheck-o,
.btn.call-to-action,
.radio-button-strip label span.call-to-action,
.landing-root .list-panel a:hover,
.navbar,
.full-page-overlay .dialog-container .dialog-title,
.highlight,
#postcode-form .list-panel.yellow,
.radio-button-strip label [type=radio]:checked+span:hover,
.radio-button-strip label [type=radio]:active+span:hover,
.radio-button-strip label [type=radio]:focus+span:hover,
.custom-calendar table.calendar-table td.isSelectable:hover,
button.btn.btn-primary,
a.btn.btn-primary,
.success-block,
.btn.btn-primary,
.markdown-container a.btn-primary,
.radio-button-strip label span.btn-primary,
#header-bottom,
#footer-bottom,
#menu,
.home-blocks .card,
.home-blocks .tile,
.progress-header ul.breadcrumb li.current:after,
.header-block {
    background-color: var(--primary);
}

.home-blocks .card {
    background-color: var(--secondary);
}

.btn, 
.markdown-container a,
.radio-button-strip label span,
.border-left,
.customcheck:checked~.customcheck-o,
.customcheck-o,
table.table th.sortable:hover,
.landing-root .panel-sign-in .list-panel a, 
.landing-root .panel-sign-in .list-panel a:hover,
body .custom-calendar table.calendar-table td,
#footer-top,
#header-top {
    border-color: var(--secondary);
}

.landing-root .list-panel h3,
.landing-root .list-panel p,
.skip-capacity,
.customcheck~.customcheck-o .fa-check,
#postcode-form .list-panel.yellow,
#postcode-form .list-panel.yellow h1,
#postcode-form .list-panel.yellow h2,
#postcode-form .list-panel.yellow h3,
#postcode-form .list-panel.yellow h4,
#postcode-form .list-panel.yellow h5,
#postcode-form .list-panel.yellow h6 {
    color: var(--text-light);
}
.landing-root .list-panel a,
.btn.call-to-action:hover, 
.radio-button-strip label span.call-to-action:hover,
.landing-root .panel-sign-in .list-panel,
a.btn.btn-primary:hover,
button.btn.btn-primary:hover,
.btn.btn-primary:hover, .markdown-container a.btn-primary:hover, .radio-button-strip label span.btn-primary:hover {
    background-color: var(--text-light);
}
.landing-root .list-panel a,
.landing-root .list-panel a:hover {
    border-color: var(--text-light);
}

/* Tiles */
.home-blocks .tile,
.home-blocks .tile h1,
.home-blocks .tile h2,
.home-blocks .tile h3,
.home-blocks .tile h4,
.home-blocks .tile h5,
.home-blocks .tile h6 {
    color: var(--text-light);
    background-color: var(--quaternary);
    border-radius: 10px;
}

/* Secondary Text Usage */
.panel-sign-in .panel-text,
.panel-sign-in .list-panel h3,
.panel-sign-in .list-panel p,
.wheely-bins,
.progress-header h1,
ul.breadcrumb li a,
.progress-header span {
    color: var(--secondary);
}

/* Tertiary Highlights */
.custom-calendar table.calendar-table td.isSelectable:hover {
    background-color: var(--secondary);
    border: 1px solid var(--primary);
}

.custom-calendar table.calendar-table td.isSelectable:hover .dayNum {
    color: var(--text-light) !important;
}

/* Footer */
#footer-top {
    background-color: var(--background1);
    color: var(--secondary);
    border-top: 5px solid var(--tertiary) !important;
}

#footer-bottom {
    background-color: var(--primary);
    color: var(--text-light);
}

.middle-footer-item {
    text-align: center;
    color: var(--secondary);
}

.middle-footer-item .nav-item a:hover {
    color: var(--tertiary);
}


/* Breadcrumb Centering */
.progress-header {
    text-align: center;
}

.progress-header .flex-row {
    justify-content: center;
}

/* Font Settings */
body, h1, h2, h3, h4, div, span, li, ul, button, input, textarea, a, select, label {
    font-family: 'Poppins', sans-serif;
}

.wheely-bins {
    background-Image: url('https://shop.portlandskips.co.uk/Image/BAG-QTY.png?v=b5ad1624&s=0');
    background-size: contain;
    background-position: center center; 
    color: var(--text-light);
    padding-left: 4px;
}


/* HIDE PROGRESS ICON */
.progress-Image {
	display: none;
}


/* FONT */
body, h1, h2, h3, h4, div, span, li, ul, button, input, textarea, a, select, label {
    font-family: 'Poppins', sans-serif;
}
#postcode-form .list-panel.yellow {
    font-size: 14px;
}
#postcode-form .list-panel.yellow h3 {
    font-size: 18px;
}
@media screen and (max-height: 500px) and (min-width: 800px) {
    .desktop-landscape h3 {
        font-size: 18px; 
    }
}



/* CENTER BREADCRUMBS */
.progress-header {
    text-align: center;
}
.progress-header .flex-row {
    justify-content: center;
}


/* CUSTOM CUSTOMER */
.category-select-template {
  width: 13rem;
}
.progress-header,
.page-title {
	background-color: rgba(234,234,234,0.37);
}





/* TO GO TO ROB'S */
h2 {
    margin-bottom: 15px;
}
@media screen and (max-width: 460px) {
	.narrow-template .flex-col .skip-capacity {
		width: 60px;
        height: 60px;
	}
    .narrow-template .Image-col img {
        max-width: 150px;
    }
}



/* CMS CSS */

#footer-top,
#header-top  {
	border-top-width: 2px;
	border-top-style: solid;
}
#header-bottom .container {
	padding: 0;
}
#header-top .container {
	padding-top: 5px;
	padding-bottom: 5px;
}
.head-contact,
#head-menu {
	display: flex;
	width: 100%;
	align-items: center;
	flex-wrap: wrap;
}
.head-contact .block img {
	width: 20px;
}
#head-menu .block:last-child {
	flex-grow: 2;
	text-align: right;
}
#content {
	padding-bottom: 50px;
}
#footer-top {
	background-color: rgba(234,234,234,0.37);
	margin-top: 60px;
}
#header-top {
	background-color: var(--secondary);
	padding-top: 1px;
	padding-bottom: 1px;
}
#header-top,
#header-bottom,
#footer-bottom,
#menu {
	color: var(--text-light);
}
.centre_align {
	text-align: center;
}
.contact_icons {
	background-color: var(--primary);
	color: var(--text-light);
	border-radius: 30px;
	text-align: center;
}
.textwidget,
.contact_icons {
	display: flex;
	flex-direction: column;
}
.contact_icons img {
   align-self: center;
	margin-bottom: 15px;
}
section:not(#header-top):not(#header-bottom) .container:not(.page-title) .row {
	padding-top: 20px;
	padding-bottom: 30px;
}
.textwidget img {
	width: 20px;
	margin-right: 5px;
}
#footer-bottom h3 {
	margin-bottom: 30px;
}
h3,
iframe {
	margin-bottom: 10px;
}
iframe {
	border: 2px solid #fff;
}
.openingtimes td {
	padding-bottom: 10px;
}
.openingtimes td:first-child {
	text-align: right;
	padding-right: 5px;
}
.head-contact h3 {
	text-transform: uppercase;
	font-size: 14px;
	margin: 5px 0 0 0;
}
.head-contact {
	color: var(--text-light);
}
.page-title .row {
	margin-top: 0;
	padding-top: 0;
	padding-bottom: 0;
	text-align: center;
}
#content img {
	max-width: 100%;
}
.rowid-1 img {
	margin-bottom: 10px;
}
body {
    min-width: 320px;
}
.header-block {
    color: var(--text-light);
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* QUOTE ENQUIRY PAGE */

section#quote-info ~ section#contact-blocks {
display: none;
}

/* FOOTER MIDDLE SECTION*/

.middle-footer-item{
text-align:center;
}

@media screen and (min-width: 1600px) {
    .header-block h3,
	.homepage-block h3 {
        font-size: 40px;
    }
    .header-block p,
	.homepage-block p,
    .header-block h3,
	.homepage-block h3 {
        padding-bottom: 30px;
    }
    .header-block p,
	.homepage-block p,
    .header-block .btn,
	.homepage-block .btn {
        font-size: 20px;
    }
}
@media screen and (min-width:992px) and (max-width: 1600px) {
   .product-row .card-footer table tr {
        display: flex;
        flex-direction: column;
    }
    .product-row .card-footer table tr td {
        width: auto !important;
    }
    .product-row .card-footer table tr td .text-right {
        text-align: left !important;
    }

    .header-block h3,
	.homepage-block h3 {
        font-size: 30px;
    }
    .header-block p,
	.homepage-block p,
    .header-block h3,
	.homepage-block h3 {
        padding-bottom: 20px;
    }
    .header-block p,
	.homepage-block p,
    .header-block .btn,
	.homepage-block .btn {
        font-size: 18px;
    }

}

@media (min-width: 768px) and (max-width: 992px) {
	.openingtimes {
		margin-left: 81px !important;
	}
}


@media screen and (max-width:991px) {
    section:not(#header-top) .col {
        margin-bottom: 20px;
    }

   #content > div > div > div.col {
        margin-bottom: 0px;
    }

    .img-container {
          max-height: 352px;
          overflow: hidden;
     }
}
iframe {
    max-width: 100%;
}
.background-Image {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
#header-bottom .large-nav .nav-link {
    text-transform: uppercase;
}
@media screen and (min-width: 1010px) {
    .nav-link {
        font-size: 18px;
    }
}
.home-header {
    background-Image: url('https://shop.portlandskips.co.uk/Image/Portland%20Stone%20Order%20Skips%20Grabs%20Aggregate%20Online%20Delivery%20Dorset%20Weymouth%20Bridport.jpg?v=c18b1e16&s=1');
}
.center-block {
    flex-grow: 1;
}

.head-contact .block:not(:first-child) img {
    margin-right: 5px;
}

@media screen and (max-width: 1040px) {
    .user-name {
        display: none;
    }
}
@media screen and (max-width: 860px) {
    .head-contact .block {
        flex-grow: unset;
    }
}
@media screen and (max-width: 991px) {
    .large-nav {
        display: none;
    }
    #head-menu {
        flex-direction: column;
        align-items: stretch;
    }
    #head-menu .block {
        text-align: center;
    }
    #head-menu .fa-bars:before {
        color: var(--text-light);
    }
	.openingtimes {
		width: 100%;
	}
	.openingtimes td:last-child {
		text-align: left;
	}
    .head-contact {
       justify-content: space-between;
    }
	#header-top .navbar {
	    background-color: var(--secondary)
	}
	#header-top .navbar .fa-bars:before {
	    color: var(--text-light);
	}
	#header-top .col-12 {
	    padding-left: 0;
	    padding-right: 0;
	}
}
@media screen and (min-width: 992px) {
    section#homeheader .row{
        padding-top: 200px !important;
        margin-bottom: -150px;
    }
    section#homeheader {
        margin-bottom: 150px;
    }
    .mobile-nav {
        display: none;
    }
	.large-right .openingtimes {
		float: right;
	}
	.large-right {
		text-align: right;
	}
	.head-contact .block {
		padding-right: 30px;
	}
}
#head-menu .mobile-nav .nav-item {
    text-align: left;
}
.artificial-grass {
	background-Image: url('https://shop.portlandskips.co.uk/Image/Portland%20Stone%20-%20Buy%20Artificial%20Grass%20Astro%20Turf%20Online%20-%20Weymouth%20Dorset.jpg?v=4c878e7&s=1');
}
.mw-500 p {
    max-width: 500px;
}
.mw-500 p {
    max-width: 500px;
}
img {
	max-width: 100%;
}
section#footer-bottom ul li:first-child a.nav-link {
    padding-top: 0;
}
.home-blocks {
    padding-bottom: 20px;
}
.home-blocks .card {
    color: var(--text-light);
	box-shadow: 0 0 10px #000;
}
.contact_icons:hover {
    background-color: var(--secondary);
}
.card-body {
    padding-bottom: 0;
}

.card h4 {
    font-weight: bold;
    color: var(--secondary);
}

.price-tag {
    color: var(--tertiary) !important;
}

.background-panel {
    background-color: var(--text-light);
    border-radius: 15px;
}
.card h4 i {
    display: none;
}
/* .card-footer td:nth-child(3) {
    display: none;
} */
@media screen and (max-width: 1200px) {
    .container {
        width: 100%;
    }
}
#header-bottom .row {
    margin-right: 0;
    margin-left: 0;
}


/* HOMEPAGE IMAGE */
.homeImage {
    /*position: absolute;*/
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.homeImage img {
	width: 100%;
}
.home-header {
    background-Image: none !important;
}
@media screen and (min-width: 992px) {
	section#homeheader .row {
	      padding-top: 0 !important;
	      margin-bottom: 0 !important;
	}
}
.home-blocks .card {
    box-shadow: 0 0 0 #000;
}
@media screen and (min-width: 992px) {
section#homeheader {
    margin-bottom: 0 !important;
}
}

h3.headline {
    text-align: center;
    margin-top: 20px;
}
#google-row {
    margin-bottom: 50px;
    margin-top: 50px;
}
#footerbottom img {
    width: 100%;
}
.radio-button-strip label [type=radio]:checked, .radio-button-strip label [type=radio]:active, .radio-button-strip label [type=radio]:focus {
    background-color: var(--secondary) !important;
}

.radio-button-strip label span {
    display: block;
}

.btn {
    color: var(--text-light);
}

#product-context .radio-button-strip label span {
    padding-bottom: 20px;
}

.radio-button-strip label [type=radio]:checked, .radio-button-strip label [type=radio]:active, .radio-button-strip label [type=radio]:focus {
    background-color: var(--secondary) !important;
}

.radio-button-strip label span {
    display: block;
}

#product-context .radio-button-strip label span {
    padding-bottom: 20px;
}

.radio-button-strip label [type=radio]:checked+span:hover {
    border: 1px solid  var(--secondary);
}


.btn:hover {
   background-color: var(--tertiary);
}

a:hover {
    color: var(--tertiary)
}

.nav-item a:hover {
    color: var(--secondary)
}

.dropdown-menu {
    padding: none;
}

.dropdown-menu .dropdown-item:hover {
    background-color: var(--quaternary);
}

.card.hover:hover {
    background-color: var(--quaternary);
    
}

.card.hover:hover .price-tag {
    color: var(--text-light) !important;
}

#head-menu > div.block.logo-block > a > img {
    height: 130px;
}

#head-menu > div.block.logo-block {
    padding-top: 10px;
    padding-bottom: 10px;
}

.contact_icons a:hover {
    color: var(--text-light);
}

.composite-address-input .postcode-input {
    color: var(--secondary);
}

#contact-blocks img {
    max-height: 64px;
}

.list-panel.yellow {
    background-color: var(--quaternary) !important;
    color: var(--text-light);
}

.markdown-container a {
    background-color: var(--primary);
    color: var(--text-light);
}

.markdown-container a:hover {
    background-color: var(--secondary);
}

#container-form div.flex-col.align-center.border-left > a {
    color: var(--secondary);
}

#container-form div.flex-col.align-center.border-left > a:hover {
    color: var(--tertiary);
}

.list-panel.flex-row {
    border-radius: 15px;
}

#date-form td.today {
    background-color: var(--quaternary) !important;
    color: var(--text-light);
    border: 1px solid var(--quaternary);
}

.dialog-container {
    border-radius: 15px;
}

.dialog-title {
    border-radius: 14px 14px 0px 0px;
}

.msg-panel-close {
    border-radius: 0px 14px 0px 0px;
}

.custom-calendar {
    padding: 25px;
    border-radius: 15px;
}

table.striped tr {
  background-color: #c2daea;
}

.selected-address-summary {
    color: var(--secondary) !important;
}

.address-results {
    background-color: var(--primary)
}

.address-results label:not(:last-child):after {
    background-color: var(--secondary);
}

.btn-primary {
    background-color: var(--primary);
}

.btn-primary:hover {
    background-color: var(--secondary) !important;
    color: var(--text-light) !important;
}

.btn-primary:active {
    background-color: var(--secondary) !important;
    color: var(--text-light) !important;
}

.btn-primary:focus {
    box-shadow: none !important;
}

.info-block {
    background-color: var(--quaternary);
    color: var(--text-light);
    border-radius: 15px;
}

.list-panel {
    border-radius: 15px;
}

.embed-responsive {
   border-radius: 15px 15px 0px 0px;
}

#content > div:nth-child(2) > div > div.col.col-lg-8.col-12.px-0 > img {
    width: -webkit-fill-available;
}

#content > div:nth-child(3) > div > div.col.col-lg-8.col-12.px-0 > img {
}

#content > div:nth-child(4) > div > div.col.col-lg-8.col-12.px-0 > img {

}

.block.menu-block {
    font-weight: 600;
}

.large-nav .dropdown-menu {
    position-area: bottom;
}

#mainmenu > ul > li.nav-item.dropdown > div > a:hover {
    background-color: var(--quaternary);
}

#content > div:nth-child(2) > div > .img-container {
    max-height: 407px;
}

#content > div > div > div.col.col-lg-8.col-12.px-0 > img {
    height: -webkit-fill-available;
    //min-width: fit-content;
}

.img-container {
    overflow: hidden;
}

.openingtimes {
    margin-left: -25px;
}

#review-form > div.container > div:nth-child(3) > div.col-md-4 > h4:nth-child(7) {
    display: none;
}

#review-form > div.container > div:nth-child(3) > div.col-md-4 > h2:nth-child(8) {
    display: none;
}

#review-form > div.container > div:nth-child(3) > div.col-md-4 > h4:nth-child(12)::before {
    content: "Total";
    color: inherit;
}

#review-form > div.container > div:nth-child(3) > div.col-md-4 > h4:nth-child(12) {
    visibility: hidden;
}

#review-form > div.container > div:nth-child(3) > div.col-md-4 > h4:nth-child(12)::before {
    visibility: visible;
}