html,body{
	width: 100%;
	height: 100%;
	font-family: -apple-system,BlinkMacSystemFont,San Francisco,Helvetica Neue,
	Helvetica,Ubuntu,Roboto,Noto,Segoe UI,Arial,sans-serif;
	color: #222;
	margin-top: 0px;
	/*-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-user-select: none;*/
	
}

*{

	box-sizing: border-box;
}

.navbar{
	background:white ;
	padding: .8rem;
	border-bottom:;
	box-shadow:;
}

.navbar-toggler span{
	font-weight: bold; 
	color: green;
}

.navbar-nav li{
	padding-right: 10px;
	color: black;
	background-color:;
	padding: 10px;
	font-family: cursive;
	font-weight: bold;

}

.nav-link{
	font-size:13px; 
	font-style: italic;
	padding: 50px;
	text-align: center;
	font-weight:;
}

.navbar .logo{ 
	font-style: italic; 
	padding: px; 
}

.navbar .logoA{
	color: green; font-size: 50px; padding-right: 1px;
}

.navbar .logoW{
	color: red; font-size: 25px;
}

.navbar .logoI{
	color: blue; font-size: 25px; padding-right: 3px;
}

.navbar .logoC{
	color: goldenrod; font-size: 50px;
}

input,textarea{
	box-shadow: none;
	border: none;
}

.social a{
	font-family: ;
}



table.counties{
	margin-top: 310px;
}

table.categories{
	margin-top: 30px;
}

tr td{
	padding-top: 7px;
	padding-bottom: 7px;
	padding-left: px;
	padding-right: px;

}

img.logoimage{
	margin-top: 0px;
	border-radius: 50px;
}



/*style the search field
form.searchcounty input[type=text]{
	padding:12px;
	font-size: 17px;
	border:1px solid lightblue;
	border-right: none;
	float: left;
	border-radius:30px;
	width:100%;
	background: #f1f1f1;
	color:red;
	margin-top: 60px;
	background:lightblue;
}*/

/*style the submit button*/
	/*form.searchcounty button{*/
		float: left;
		width: 20%;
		padding:10px;
		background: #f1f1f1;
		color: white;
		border-radius:0px 30px 30px 0px;
		font-size: 17px;
		border:2px solid white;
		border-left: none;
		margin-top: 40px;
		box-shadow: 10px 10px 10px  black;
		/*style the submit button*/
	    cursor:pointer;
    }

    form.searchcounty button:hover{
    	background: red;
    }

    /*clear floats*/
    form.searchcounty::after{
    	content:"";
    	clear: both;
    	display: table;
    }

    #myTable{
    	border-collapse: collapse;
    	width: 100%;
    	border:px solid blue;
    	font-size: 20px;
    }

    tr.counties{
    	color: ;
    	visibility: hidden;
    }



#topp{
	position: sticky;
	top:0;
	z-index: 2;
	color: white;
	text-align: center;
}

/*.fa-home{
	color: white;
	background: black;
	padding: 7px;
	border-radius: 50%;
}*/

.fa-facebook{
	color: orange;
	background: purple;
	padding: 7px;
	border-radius: 50%;
}

.fa-twitter{
	color: #00aced;
	background: blue;
	padding: 7px;
	border-radius: 50%;
}

.fa-linkedin{
	color: #3b5998;
	background: orange;
	padding: 7px;
	border-radius: 50%;
}

.fa-youtube{
	color: #bb0000;
	background: white;
	padding: 7px;
	border-radius: 5%;
}

/*
.fa-whatsapp{
	color: white;
	background: green;
	padding: 7px;
	border-radius: 50%;
	border:1px solid white;
}
*/

.us.fa-phone{
	color: white;
	background: blue;
	padding: 7px;
	border-radius: 50%;
	border:1px solid white;
}

.us.fa-envelope{
	color: white;
	background: red;
	padding: 7px;
	border-radius: 50%;
	border:1px solid white;
}
.social a{
	font-size:12px;
	padding: 10px;
	border-radius: 50%;
	font-weight: bold;
}	

.social p{
	font-size: 10px;
}

.btn:focus, .btn:active:focus, .btn.active:focus{
	outline: none !important;
	box-shadow: none !important;
	/*background: green !important;*/
}

.btn.menu:hover{
     background: rgba(44, 130, 201,0.1);
}

.btn.materials:hover{
     background: rgba(44, 130, 201,0.1);
}

.counties td button:hover{
	color: red;
	text-decoration:none;
	font-family: Georgia;
}

.categories td button:hover{
	color: goldenrod;
	text-decoration:none;
	font-family: ;
}

.blog a:hover{
	color: goldenrod;
	text-decoration:none;
	font-family: ;
}


.faqs li a:hover{
	color: goldenrod;
	text-decoration:none;
	font-family:;
}

.menuu a:hover{
	border:1px solid goldenrod;
	padding: 5px;
	text-decoration:none;
	font-family: ;
}

.social a:hover{
	font-size: 17px;
	text-decoration: none;
	font-family: ;
}

.joinfindabtn a:hover{
	font-size: 25px;
	font-family: ;
}

form.quest input{
	box-shadow: none;
	background: lightgrey;
}

form.quest textarea{
	box-shadow: none;
	background: lightgrey;
	height: 200px;
}

form.quest select{
	box-shadow: none;
	background: lightgrey;
	height: 200px;
}


#contactcutbtn:hover{
	background: lightgrey;
}







/*floating btn styles start*/
.dropup{
			position: relative;
			display: inline-block;
		}

		.dropup-content{
			display: none;
			position: fixed;
			bottom: 70px;
			background: #f1f1f1;
			box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
			min-width: 70px;
			z-index: 1;
			text-align: center;
			margin-right: px;
		}

		.dropup-content a{
			color: black;
			padding: 12px 16px;
			text-decoration: none;
			display: block;
		}

		.dropup-content a:hover{
			background: lightgrey;
		}

		.dropup:hover .dropup-content{
			display: block;
		}
/*floating btn styles ends*/








/*media queries*/
@media only screen and (min-width: 20px) {
	/*smartphone portrait*/
.all{
		margin-right: auto;
		margin-left: auto;
		display: block;
		width: 100%;
	}



img.homelogo{
	margin-top:50px;
	margin-left: auto; margin-right: auto; display: block;
	width:50%; height:70px;
}

/*&table{
	margin-top: 200px;
	border-bottom:;
}*/

table.categories{
	margin-top: 0px;
	border-bottom:;
}

table.counties{
	margin-top:0px;
	border-bottom:;
}


.social a{
	font-size:10px;
	padding: 12px;
	display: non;
}

.contact a{
	font-size:10px;
	padding-right: 5px;
	padding-left: 5px;
	margin-left: 8px;

}

.help a{
	font-size:10px;
	padding-right: 5px;
	padding-left: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-left: 8px;

}


form.searchcounty input[type=text]{
	margin-top: 25px;
}

img.blog-img{
	height: 200px;
	width: 100%;
}

td img{
	width: 20px;
	height: 20px;
}

.counties td a{
	font-size: 20px;
	font-weight: normal;
}

.categories td a{
	font-size: 14px;
	font-weight: normal;
}

.clibody{
	margin-top: 105px;
}

img.logoimage{
	width: 50px;
	height: 50px;
}

.searchmarginc{
	margin-top: 83px;
}

.searchmargincl{
	margin-top: 80px;
}

button.seemore{
	width: 80%;
}

.back a{
	color: red;
	 font-size:30px; 
	 padding: 2px; 
}

img.aboutimg{
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	display: block;
}

#floatingbtn1{
	left:10px;
}

#floatingbtn2{
	right:10px;
}

.dont{
	visibility: hidden;
}

.dontt{
	visibility: hidden;
}

.zipatelogo{
	width: 40%;
	height: auto;
}





.homeheading{
    font-size:26px;
}

.secondparagraph{
    font-size:12px;
}


.responsive-btn {
                width: 80px;
                height: 80px;
                font-size: 10px;
            }

}







@media only screen and (min-width: 520px) {
	/*smartphone landscape*/
.all{
		margin-right: auto;
		margin-left: auto;
		display: block;
		width: 100%;
	}





table.counties{
	margin-top: 0px;
	border-bottom:;
}

form.searchcounty input[type=text]{
	margin-top: 20px;
}

.contact a{
	font-size:10px;
	padding-right: 10px;
	padding-left: 10px;
	margin-left:50px; 
}
.help a{
	font-size:12px;
	padding-right: 5px;
	padding-left: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-left: 8px;

}

.social a{
	font-size:10px;
	padding: 12px;
	display: non;
}

img.blog-img{
	height: 300px;
	width: 100%;
}

td img{
	width: 35px;
	height: 35px;
}

.counties td a{
	font-size: 20px;
	font-weight: normal;
}

.categories td a{
	font-size: 20px;
	font-weight: normal;
}

h5.title{
	font-size: 20px;
}

.clibody{
	margin-top: 85px;
}
img.logoimage{
	width: 50px;
	height: 50px;
}

.searchmarginc{
	margin-top: 95px;
}

.searchmargincl{
	margin-top: 90px;
}

.back a{
	color: red;
	 font-size:30px;  
	 padding: 2px; 
}

img.aboutimg{
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	display: block;
}

#floatingbtn1{
	left:10px;
}

#floatingbtn2{
	right:10px;
}

.dontt{
	visibility: hidden;
}

.zipatelogo{
	width: 30%;
	height: auto;
}





.homeheading{
    font-size:26px;
}

.secondparagraph{
    font-size:12px;
}


.responsive-btn {
                width: 100px;
                height: 100px;
                font-size: 14px;
            }

	
}








@media only screen and (min-width: 768px) {
	/*tablet portrait*/
.all{
		margin-right: auto;
		margin-left: auto;
		display: block;
		width: 70%;
	}


img.homelogo{
	margin-top: 50px;
	margin-left: auto; margin-right: auto; display: block;
	width:50%; height:70px;
}

table.counties{
	margin-top:0px;
	border-bottom:;
}

table.categories{
	margin-top: 30px;
	border-bottom:;
}

form.searchcounty input[type=text]{
	margin-top: 20px;
}

.contact a{
	font-size:14px;
	padding-right: 10px;
	padding-left: 10px;
}

.help a{
	font-size:14px;
	padding-right: 5px;
	padding-left: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-left: 8px;

}

.social a{
	font-size:10px;
	padding: 30px;
	visibility: visible;
}

img.blog-img{
	height: 400px;
	width: 100%;
}

td img{
	width: 60px;
	height: 60px;
}

.counties td a{
	font-size: 30px;
	font-weight: normal;
}

.categories td a{
	font-size: 30px;
	font-weight: normal;
}

h5.title{
	font-size: 23px;
}

.clibody{
	margin-top: 130px;
}

img.logoimage{
	width: 70px;
	height: 70px;
}

.searchmarginc{
	margin-top: 112px;
}

.searchmargincl{
	margin-top: 120px;
}

button.seemore{
	width: 30%;
	
}

.back a{
	color: red;
	 font-size:40px; 
	 border-radius: 30px; 
	 margin-left: 30px;
	 margin-right: 30px; 
	 box-shadow: 3px 3px 3px white;
}

img.aboutimg{
	width: 50%;
	margin-left: auto;
	margin-right: auto;
	display: block;
}


#floatingbtn1{
	left:80px;
}

#floatingbtn2{
	right:80px;
}

.dontt{
	visibility: visible;
}

.zipatelogo{
	width: 40%;
	height: auto;
}




.homeheading{
    font-size:35px;
}

.secondparagraph p{
    font-size:16px;
}


.responsive-btn {
                width: 180px;
                height: 180px;
                font-size: 14px;
            }
}









@media only screen and (min-width: 1240px) {
	/*tablet/desktop landscape*/
.all{
		margin-right: auto;
		margin-left: auto;
		display: block;
		width: 70%;
	}


img.homelogo{
	margin-top: 80px;
	margin-left: auto; margin-right: auto; display: block;
	width:50%; height:120px;
}

table.categories{
	margin-top: 0px;
	border-bottom:;
}

form.searchcounty input[type=text]{
	margin-top: 50px;
}

form.searchcategory input[type=text]{
	margin-top: 0px;
}

form.searchcategorylist input[type=text]{
	margin-top: 0px;
}

.social a{
	font-size:12px;
	padding: 50px;
	visibility: visible;
}

table.counties{
	margin-top:0px;
	border-bottom:;
}

.contact a{
	font-size:16px;
	padding-right: 10px;
	padding-left: 10px;
}

.help a{
	font-size:14px;
	padding-right: 5px;
	padding-left: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-left: 8px;

}

img.blog-img{
	height: 400px;
	width: 70%;
	margin-left: auto;
	margin-right: auto;
	display: block;
}

.blog-top p{
	width: 70%;
	margin-left: auto;
	margin-right: auto;
	display: block;	
}

td img{
	width: 40px;
	height: 40px;
}

.counties td a{
	font-size: 18px;
	font-weight: normal;
}

.categories td a{
	font-size: 18px;
	font-weight: normal;
}

.blog td a{
	font-size: 15px;
}

h5.title{
	font-size: 30px;
}

.clibody{
	margin-top: 130px;
}

img.logoimage{
	width: 70px;
	height: 70px;
}

.searchmarginc{
	margin-top: 110px;
}

.searchmargincl{
	margin-top: 118px;
}

button.seemore{
	width: 30%;
	
}

.back a{
	color: red;
	 font-size:40px; 
	 border-radius: 30px; 
	 margin-left: 50px;
	 margin-right: 50px; 
	 box-shadow: 3px 3px 3px white;
}

img.aboutimg{
	width: 50%;
	margin-left: auto;
	margin-right: auto;
	display: block;
}

body.about{
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	display: block;
}

#floatingbtn1{
	left:80px;
}

#floatingbtn2{
	right:80px;
}

.dont{
	visibility: visible;
}

#floatingbtn2{
	visibility: hidden;
}

.dontt{
	visibility: visible;
}

.zipatelogo{
	width: 20%;
	height: auto;
}





.homeheading{
    font-size:35px;
}

.secondparagraph p{
    font-size:16px;
}

.responsive-btn {
                width: 150px;
                height: 150px;
                font-size: 14px;
            }
	
}

















.openingparagraph h1{
	font-size: 18px;
	text-align: center;
	font-weight: bold;
}


.secondparagraph p{
	text-align:;
	font-size:;
}




















/*rotating an image script*/

@keyframes rotation{
      from{
        transform: rotate(0deg);
      }to{
        transform: rotate(359deg);
      }
    }