@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: 'allerregular';
    src: url('../fonts/aller_rg-webfont.woff2') format('woff2'),
         url('../fonts/aller_rg-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
	background: #fff;	
	margin: 0;
	padding: 0;
	font-size: 15px;
	color: #3c3c3c;
	font-family: "allerregular", Helvetica, Arial, sans-serif;
}

#page {
	margin: 0;
	position: relative;
}

header {
	width: 100%;
	height: 230px;
    display: flex;
    flex-flow: row wrap;
    justify-content: left;
    align-items: flex-end;
}

h1 {
	font-size: 3em;
    margin-top: 50px;
}

h2 {
	font-size: 1.85em;
}

h3 {
	font-size: 1.5em;
}

td {
	padding-bottom: 6px;
}

	.logo {
		display: block;
        margin: 30px;
		width: 285px;
		height: 165px;
		background: url(../images/logo.png);
	}
	
	.logo span {
		display: none;
	}

    .headercontact {
        margin: 0 0 30px 20px;
        display: flex;
        flex-flow: row wrap;
        justify-content: left;
        align-items: flex-end;
    }

        .headercontact .hours {
            margin-top: 10px;
        }

	.navsection {
		width: 100%;
		height: 50px;
		margin: 0;
		background: #41596b;
	}

	nav {
		max-width: 1200px;
		margin: 0 auto;	
	}

	.normalnav {
        width: 85%;
        margin: 0 auto;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
	}

	.normalnav a {
		margin: 0 auto;
		padding: 18px 5px 8px 5px;
		font-family: 'allerregular', Helvetica, Arial, sans-serif;
		color: #e8e8e6;
		text-decoration: none;
		text-align: center;
	}

    .menunav {
        display: none;
        background-color: #41596b;
        position: relative;
    }

    .menunav #links {
        display: none;
    }

    .menunav #links a:hover {
        background: #555;
    }

    .menunav a {
        display: block;
        padding: 10px 16px;
        font-family: 'allerregular', Helvetica, Arial, sans-serif;
		color: #e8e8e6;
        text-decoration: none;
        text-align: center;
        font-size: 15px;
    }

    .menunav a.icon {
        display: block;
        padding: 6px;
        position: absolute;
        right: 6px;
        top: 6px;
    }


	.introsection {
		width: 100%;
		min-height: 450px;
		background: #e8e8e6;
		color: #303030;
	}

	.intro {
		max-width: 1200px;
		min-height: 450px;
		margin: 0 auto;
		background-image: url('../images/introback.jpg');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: 50% 50%;
	}

        .intro .introtext {
            width: 40%;
            padding: 30px 150px;
        }


	.quoteintrosection {
		width: 100%;
		min-height: 250px;
		background: #e8e8e6;
		color: #303030;
	}

	.quoteintro {
		max-width: 1200px;
		min-height: 250px;
		margin: 0 auto;
		background-image: url('../images/quoteback.jpg');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: 50% 50%;
	}

        .quoteintro .quoteintrotext {
            width: 40%;
            padding: 30px;
        }

	
	.howitworkssection {
		width: 100%;
		background: #e8e8e6;
		color: #303030;
	}

	.howitworks {
		max-width: 1200px;
		margin: 0 auto;
		background: #a19c93;
	}

        .howitworks .howitworkstext {
			margin: 0 auto;
            width: 60%;
            padding: 30px;
			text-align: center;
        }

		.howcategory {
			font-size: 1.1em;
			font-weight: bold;
			float: right;
			padding-bottom: 8px;
			padding-right: 8px;
		}

        .category .howcategorytext {
            width: 100%;
            margin: 10px 0;
			
        }

	.whysellsection {
		width: 100%;
		background: #e8e8e6;
		color: #303030;
	}

	.whysell {
		max-width: 1200px;
		margin: 0 auto;
	}

        .whysell .whyselltext {
            padding: 30px;
        }

	.whysellcategory {
        
        margin-bottom: 40px;
	}
        .whysellcategory .whysellcategorytext {
            width: 100%;
            margin: 10px 0;
            
        }
	
		.whysellcategory .whysellcategorytext p {
            padding: 10px;
		}

		.whysellcategory .whysellcategorytext img {
            width: 100%;
		}



	.partialsection {
		width: 100%;
		background: #e8e8e6;
		color: #303030;
	}

	.partial {
		max-width: 1200px;
		margin: 0 auto;
		background: #80848a;
	}

        .partial .partialtext {
            padding: 30px;
        }

	.partialcategory {
        width: 48%;
        margin-bottom: 40px;
	}
        .partialcategory .partialcategorytext {
            width: 100%;
            margin: 10px 0;
            
        }
	
		.partialcategory .partialcategorytext p {
            padding: 10px;
		}



	.reviewssection {
		width: 100%;
		background: #e8e8e6;
		color: #303030;
	}

	.reviews {
		max-width: 1200px;
		margin: 0 auto;
	}

        .reviews .reviewstext {
            padding: 30px;
        }

	.quotesection {
		width: 100%;
		background: #d9d9d9;
		color: #303030;
	}

	.quote {
		max-width: 1200px;
		margin: 0 auto;
	}

        .quote .quotetext {
            padding: 30px;
        }


    .content {
        width: 100%;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;        
    }

	.category {
        width: 31%;
        margin-bottom: 40px;
	}
        .category .categorytext {
            width: 100%;
            margin: 10px 0;
            background: #D9D9D9;
        }
	
		.category .categorytext p {
            padding: 10px;
		}

	.product {
        width: 23%;
        margin-bottom: 30px;
	}

        .product .productimage img {
            width: 100%;
        }

        .product .productname {
            width: 100%;
            margin: 5px 0;
            background: #3c3c3c;
            color: #9bcc3f;
            padding: 4px 0;
            text-align: center;
        }

            .product .productname h2 {
                margin: 3px 0;
                font-size: 15px;
                font-weight: normal;
            }

            .product .productname p.productprice {
                margin: 3px 0;
                font-size: 1.1em;
            }

    .product2 {
        width: 31%;
        margin-bottom: 30px;
	}

        .product2 .productimage img {
            width: 100%;
        }

    .contact {
            width: 31%;
            margin-bottom: 30px;
        }

        .contact .contactname {
            width: 100%;
            margin: 5px 0;
            background: #3c3c3c;
            color: #9bcc3f;
            padding: 4px 0;
            text-align: center;
        }

            .contact .contactname h2 {
                margin: 3px 0;
                font-size: 15px;
                font-weight: normal;
            }

        .contacttext a {
            color: #3c3c3c;
        }
	/*
	section::after {
		content: '';
		display: block;
		clear: both;
	}
*/
a.linkbtn {
	display: block;
	width: 28px;
	margin: 0;
	padding: 4px 13px;
	background: #fff;
	color: #3c3c3c;
	font-size: 0.85em;
	border: 1px solid #6c6c6c;
	text-decoration: none;
}

.button, .button:visited {
    font-family: 'allerregular', Helvetica, Arial, sans-serif;
	font-size: 12px;
	width: 100px;
	height: 15px;
	margin: 6px 0;
	display: inline-block;
	background: #fff;
	color: #3c3c3c;
	border: 1px solid #6c6c6c;
	text-align: center;
	text-decoration: none;
	padding-top: 2px;
}


.textarea {
	width: 60%;
}

.contactbox {
    width: 48%;
    float: left;
}

.footersection {
	background: #41596b;
    color: #e8e8e6;
	margin: 0;
	height: 40px;
}

footer {
	max-width: 1200px;
	margin: 0 auto;	
}

	footer aside {
		width: 100%;
		float: left;
	}
	
	footer p {
		margin: 0; 
        padding: 10px 30px;
	}


@media screen and (max-width: 1050px) {    
    #page{
        width: 100%
    }
}

@media screen and (max-width: 860px) {
    .normalnav {
        width: 95%;
    }
    
    .headercontact {
        flex-flow: column wrap;
        justify-content: flex-start;
        align-items: flex-start;
    }
    
    section .abouttext {
        width: 100%;
        float: none;
    }

    section .aboutimg {
        width: 100%;
        padding: 0 30px 30px 30px;
        float: none;
    }
}
    
@media screen and (max-width: 700px) {    

    .category {
        width: 48%;
	}
}


@media screen and (max-width: 650px) {
    header {
        height: 360px;
        justify-content: center;
    }

    .headercontact {
        margin: 0 30px 30px 30px;
    }
    
    .product {
        width: 31%;
	}

    .normalnav {
        display: none;
    }
    
    .menunav {
        display: block;
    }
}


@media screen and (max-width: 550px) {
    .product {
        width: 48%;
	}
    
    .product2 {
        width: 100%;
	}
    
    .contact {
        width: 48%;
	}
}