/*  =================================================================
    0.0 :ROOT ~ overwrites or extras (if needed)
    ================================================================== */
    :root {
		--clr-white: #ffffff;
		--clr-sandstone: #b4ac9f;
		--clr-green: #439e47;
		--clr-green_b8: #b8bc89;
		--clr-green_83: #838576;
    }
	
	.projects .text-label,
	.packages.borders .grid-item label {
    background-color: var(--clr-green_b8);
		color: var(--clr-white);
	}
	.projects .text-label:before,
	.packages.borders .grid-item label:before {
		border-bottom: 16px solid var(--clr-green_83);
	}
	
	nav .row ul a.cta,
	.WYSIWYG li:before,
	.cta a,
	.WYSIWYG p a.button,
	a.cta,
	.projects span.fakeBtn,
	form button,
	.news .btn,
	.navi .btn,
	footer a.button {
		background-color: var(--clr-green_b8);
		color: var(--clr-white);
	}
	
	.news .btn.next:not(.disabled),
	.news .btn.prev:not(.disabled),
	.navi .btn.next:not(.disabled),
	.navi .btn.prev:not(.disabled) {
		background-color: rgba(235,235,235,0.9);
		box-shadow: 0px 0px 0px 1px rgb(181, 181, 181) inset;
		color: rgb(93,93,93,0.9);
	}
	
	.news .btn.disabled,
	.navi .btn.disabled	{
		background: #efefef;
		color: #d5d5d5;
	}
	
	
    /*  =================================================================
    MEDIA QUERIES
    ================================================================== */
    /* MOBILE */
    @media only screen and (min-width: 572px) { }

    @media only screen and (min-width: 572px) and (orientation: landscape) { }
    @media only screen and (min-width: 572px) and (orientation: portrait) { }

    /* IPADS portrait */
    @media only screen and (min-width: 768px) and (min-height: 600px) { }

    /* IPADS */
    @media only screen and (min-width: 768px) { }

    /* IPADS landscape AND mini laptops */
    @media only screen and (min-width: 960px) { }

    /* SMALL SCREENS */
    @media only screen and (min-width: 1280px) { }

    /* WEIRD HEADER TEXT BREAKPOINT ~ must be paddings or margins */
    @media only screen and (min-width: 1340px) { }

    /* SMALL SCREENS */
    @media only screen and (min-width: 1440px) { }
    @media only screen and (min-width: 1600px) { }
    @media only screen and (min-width: 1920px) { }

/*  =================================================================
    TOUCH DEVICES
    ================================================================== */
    @media (pointer:coarse) { }

/*  =================================================================
    HOVER STATES
    ================================================================== */
    @media (any-hover: hover) {
		
		.breadcrumb a:hover {
			color: var(--clr-grey_5d);
		}
		
	}