:root{
		--bkgnd1: #f8f8f8;
		--bkgnd2:#f1eeea;
		--goldbrn:#bd7727;
		--gold:hsl(45, 100%, 45%);
		--cordovin: #e68a00;
		--palegold:#EEE8AA;
		--black: #000;
		--white: #fff;
		--menu-hvr: #ccc;
	}
		
	* {
	    margin: 0;
	    padding: 0;
	}
	body {
		font-family: "Times New Roman", Georgia, Times, serif;
		font-size: 18px;
		color: var(--black);
		background-image: url('../images/carpettexture02.jpg');
		background-repeat: repeat;
	}
	h1{
		font-size: 2.3rem;
		font-weight: bold;
		text-align: center;
		margin: .5em 0 .2em 0;
	}
	h2{
		font-size: 1.8rem;
		font-weight: bold;
		text-align: center;
		margin: .5em 0 .2em 0;
	}
	h3{
		font-size: 1.3rem;
		font-weight: bold;
		text-align: center;
		margin: .5em 0 .2em 0;
	}
	ol, ul {
        margin: 0 0 10px 1em;
        
    }
/* ==================== Top Banner ==================================== */    
	header{
	    display: block;
	    width:100%;
		background-image: url(../images/header_10x200.png);
		background-repeat: repeat-x;
	}
		
	#banner-primary{
		color: white;
		font-size: 1.6em;
		text-shadow: var(--black) 1px 1px 2px;
		font-weight: bold;
		line-height: .8em;
		padding: .3em;
		text-align: center; 
	}
	 
	#banner-secondary{
	    text-align: center;
		color:white;
		font-style: italic;
		font-weight: bold;
		text-shadow: var(--black) 1px 1px 1px;
		padding: .3em;
	}

/* ==================== Main Navigation ==================================== */    
	#mainnav{
		display: block;
		width: 100%;
		background-color: var(--bkgnd1);
		
	}
	#mainnav ul{
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		
	}
	ul.horiz-menu{
		list-style-type: none;
		padding: 0;
		margin: 0;
		justify-content: center;
	}
	ul.horiz-menu li{
		flex: 0 1 6em;
		padding: 1em 0;
		text-align: center;				
		 
	}
	ul.horiz-menu li:hover{
		background-color: var(--menu-hvr);
		
		 
	}
	ul.horiz-menu a {
		text-decoration: none;
	}
	
/* ==================== Main Content ==================================== */    
	main{
		display: flex;
		flex-flow: row wrap;
		max-width: 960px;
		margin: 0 auto;
		background-color:var(--bkgnd2);
		min-height: 300px;
	}
	section#slideshow{
	    flex: 1 0 auto;
	}
	section#main_content{
		flex: 0 1 70%;
		display: flex;
		flex-flow: column nowrap;
		line-height: 1.4;
	}
	.rowblock{
		display: flex;
		flex-flow: row nowrap;
	}
	.colblock{
		display: flex;
		flex-flow: column nowrap;
	 
	}
	#BBB{
		flex:0 1 50%;
		text-align: center;
		padding: 1em .5em;
	}
	#BBB img{
		border: 0;width:100%; height: auto;  
		border-radius: 10px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	}
	#phonenum{
		flex:0 1 50%;
		font-size: 2rem;
		align-self: center;
		text-align: center;
		 
	}
	#ServYears{
		flex:0 1 30%;
		align-self: center;
		margin-left: 1em;
	}
	#ServYears img{
		width:100%;
		height: auto;
	}
	#motto{
		flex: 0 1 70%;
		font-size: 1.5rem;
		text-align: center;
		padding: 0 1em;
		border: 1px var(--gold) solid;
		margin: 1em;
	}
	.goldfont {
		color:hsl(42, 100%,35%);    /* var(--gold)*/
	 /*	text-shadow: 1px 1px #444; */
	 	font-size: 1.1em;
	}
	article{
		display:flex;
		flex-flow: column nowrap;
		padding: 1em;
		line-height: 1.4;
	}
	.measure_img{
		float:right;
		width:30%;
		height: auto;
		margin-left: 1em;
	}
	.img-right{
		float:right;
	} 
	.img-left{
		float:left;
	} 
	.img-30{
		width: 30%;
		height: auto;
	}
		/* Brand Page */
	.brand{
		float: left;
		margin: 5px 0;
		text-align: center;
	}
	.serviceslist{
	    margin-left: 3em;
	}
	
	.serviceslist li{
	   margin-bottom: .4em;
	}
	
	.serv_county_list{
	    display:flex;
	    flex-flow:row wrap;
	    margin-bottom: 3em;
	}
    .serv_county_cell {
        flex: 0 1 25%;
        text-align: center;
        padding: 0.6em 0;
        font-size: 1.2em;
    }
    /* ==================== Side Bar ==================================== */    
	section#sidebar{
		flex: 0 1 30%;
		display: flex;
		flex-flow: column nowrap;
		background-color: var(--white);
		height:auto
		
	}
	.postaladdy {width: 90%; margin-left: 10%;}

    .DYKcard {
        margin: 2em;
        padding: 2em;
        background-color: var(--cordovin);/* sandybrown; */
        color: black;
        box-shadow: 5px 5px 5px hsl(28, 87%, 15%);
    }
     /* ==================== Home Content Page ============================= */
   
    #countylist{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    #countylist li{
       flex-shrink: 1;
       flex-grow: 0;
       flex-basis: 33%;
    }
    /* ==================== Services Page ================================ */
    .bigger{
        font-size: 1.3em;
    }
    /* ==================== Brand Page =================================== */    
   .brandintro{
       align-self:center;
       margin-bottom: 2em;
   }
    .brandlabels {
        justify-content: space-around;
        margin: 0.5em 0;
    }
    .brandlabels div {
        flex: 0 1 auto;
        align-self: center;
    }

/* ==================== Testimonials ==================================== */    
    .testimonial{
        margin: 1em;
        padding: 2em;
        line-height: 1.2em;
        box-shadow: 2px 4px 5px 1px #432;
        background-color: var(--bkgnd1);
        font-family: 'Carattere', cursive;
        font-size: 1.5rem;
    }
    .testimonial p{
        margin-bottom:1.3em;
    }
/* ==================== About Us ==================================== */    
    p.about {
        margin: .5em 2em;
    }
    h1.about {
        align-self: center;
    }
/* ==================== Articles ==================================== */    
    p.articles{
        margin: .5em 2em;
    }
    ol.articles{
        padding-left: 3em;
    }
    ul.articles{
        padding-left: 3em;
    }
    .needsinput{
        color: red;
    }
/* ==================== Contact ==================================== */    
    
    .contact_response{
        margin-left: 2rem;
    }
    
/* ==================== Footer ==================================== */    
	footer{
		background-image: url(../images/bottombar.png);
		background-repeat: repeat-x;
		text-align: center;
		padding: 1em 0;
	}
     @media only screen and (max-width: 780px)
     {
         main{
             flex-flow: column nowrap;
         }
         ul, ol {
            margin: 0 0 10px 2em;
         }
         .rowblock{
             flex-flow: column nowrap;
         }
		#mainnav ul{
			flex-flow: column nowrap;
			align-items: center;
			
		}
		ul.horiz-menu li{
            flex: 0 1 1.5em;
		    padding: .3em 0;
			text-align: center;				
		}

		
     }
     @media only screen and (max-width: 600px)
     {
        #countylist li{
           flex-basis: 50%;
        }

     }