*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Roboto", Helvetica, Arial, Verdana, sans-serif;
	list-style: none;
	text-decoration: none;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

.logo{
	display: grid;
	grid-template-columns: 1fr minmax(300px, 25%) 1fr;
}
.logo img{
	border: 1px black solid;
	background-color: lightgoldenrodyellow;
	border-radius: 20px;
	margin: 0 auto;
	grid-column: 2/3;
	max-width: 100%;
	height: auto;
}
.container{
	display: grid;
	grid-template-columns: minmax(6rem, 1fr) repeat(8, minmax(min-content, 16rem)) minmax(6rem, 1fr);
	/* min-content sets the size of each column to depend on the largest item in the column*/
	grid-template-rows: repeat(1, min-content);
	grid-row-gap: 1.6rem;
	margin-top: 1.6rem;
	margin-bottom: 1rem;
}

.social-icons{
	grid-column: 2/4;
	grid-row: 1/2;
	list-style: none;
	display: grid; /* We are making the <ul> a grid here so that we can align the <li> w/in it how we want*/
	grid-template-columns: repeat(auto-fit, minmax(4rem, 1fr)); /* auto-fit helps us make the list responsive*/
	align-items: center;

}

.social-icon{
	font-size: 1.3rem;
	color: #12376e;
	transition: all .2s;
}

.social-icon:hover {
	color: #34598f;
	transform: rotateZ(360deg);
}

.first-nav{
	grid-column: 5/10;
	grid-row: 1/2;
	border-top: 0.05rem solid #12376e;
	border-bottom: 0.05rem solid #12376e;
}

.first-nav-list{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	list-style: none;
}

.first-nav-item a{
	text-decoration: none;
	display: grid; /*this allows the link elements to be centered using text-align:center b/c 
	elements given display: grid take up the same width as their parent elements*/
	text-transform: uppercase;
	text-decoration: none;
	font-size: 1.0rem;
	color: #12376e;
	padding: 0.8rem 0;
	transition: all .5s 0.3s;
	text-align: center;
}

.first-nav-item a:hover{
	background-color: #12376e;
	color: white;
	cursor: pointer;
}

.first-nav-item a::before,
.first-nav-item a::after{
	content:'';
	width: 0;
	height: .05rem;
	background-color: #12376e;
	display: block; /*allows border to be visible below and above*/
	transition: width 0.3s cubic-bezier(.55, 0, .92, .54), background-color .5s .3s;
}

.first-nav-item a::after{
	justify-self: end;
}

.first-nav-item a:hover::before,
.first-nav-item a:hover::after{
	width: 100%;
	background-color: white;
}

.first-nav-item:nth-child(2){
	position: relative;
}

.dropdown{
	position: absolute;
	top: 100%;
	background-color: #fffeee;
	padding: 1.0rem;
	visibility: hidden;
	opacity: 0;
	transition: all 1s;
}

.first-nav-item:nth-child(2):hover .dropdown{
	visibility: visible;
	opacity: 1;
}

.dropdown-list{
	list-style: none;
}

.dropdown-list-item a{
	font-size: 1.3rem;
	text-decoration: none;
	text-transform: uppercase;
	color: #34598f
	margin: 0 0 1rem 1.6rem;
	display: block; /*needed b/c link element is inline and thus cannot have margin*/
}
.dropdown-list-link:hover{
	color: #458a9f;
}

.bkg-img{
	background-image: url(./img/kitchen-2.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	height: 50vh;
}

.button{
	background-color: #FF8C00;
	padding: 10px;
	color: black;
	border-radius: 10px;
	text-transform: uppercase;
	text-decoration: none;
	position: fixed;
	left: 0;
	bottom: 0;

}
.button:hover{
	background-color: lightsalmon;
}

.CTA{
	/*grid-area: 4/1/5/2;
	align-self: center;
	justify-self: start;*/
	z-index: 2;
}

.CTA label{
	cursor: pointer;
}

.body{
	background-color: #DEDEDE;
	text-align: center;
	margin-top: 1.5rem;
}

.text{
	width: 90%;
	background-color: white;
	margin: 0 auto;
	margin-top: 1.5rem;
	margin-bottom: 0;
	padding: 1.5rem;
}

.body h1{
	padding-top: 1.5rem;
	font-size: 2rem;
}
ul{
	list-style: none;
}

p{
	margin-top: 1.5rem;
	font-size: 0.9rem;
	line-height: 1.5rem;
	text-align: left;
}

h2{
	margin-top: 1.5rem;
}

.comm-pic{
	display: grid;
	grid-template-columns: 1fr minmax(300px, 40%) 1fr;
	grid-template-rows: 1fr;
	margin-top: 1rem;
}

.comm-group{
	grid-column: 2/3;
	/*margin: 0 auto;*/ 
}

.comm-group img{
	width: auto ;
  	max-width: 100% ;
  	height: auto ;
}

.comm-group p{
	text-align: center;
}

.DN{
	height: 40vh;
	width: auto;
}

.footer{
	background-color: #18181a;
	width: 100%;
	height: auto;
	padding-bottom: 2.3rem;
	padding-top: 1rem;
	padding-left: 1rem;
}

.footer-container{
	display: grid;
	width: 100%;
	height: auto;
	grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
	color: white;
}

.footer-container h1{
	font-size: 1.5rem;
}

.footer-container p{
	margin: 0;
	padding: 0;
}

.footer-container .services a{
	color: white;
}

.footer-container .contact-us a{
	color: white;
}
@media screen and (min-width: 768px){


.menu-wrap{
	display: none;
}
}

 @media screen and (max-width: 768px){
 	.menu-wrap{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
}
.menu-wrap .toggler{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	cursor: pointer;
	width: 50px;
	height: 50px;
	opacity: 0;
}
.menu-wrap .hamburger{
	position: absolute;
	top: 0;
	left:0;
	z-index: 1;
	width: 4rem;
	height: 4rem;
	padding:1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: black;
	/*This is the square in which the menu lines will be*/
}
/*Hamburger Lines*/

/*Middle Line*/
.menu-wrap .hamburger >div{
/*greater than signs states "immediate div after .menu-wrap*/
position: relative;
width: 100%;
height: 2px;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s ease;
}

/*top and bottom lines*/
.menu-wrap .hamburger > div:before,
.menu-wrap .hamburger > div:after{
	content: '';
	position: absolute;
	z-index: 1;
	top: -10px; /*moves both lines above the middle line to begin with*/
	width: 100%;
	height: 2px;
	background: inherit;

}
/*Moves top line down below middle line*/
.menu-wrap .hamburger > div:after{
	top: 10px;
}

/*Toggler animate*/
.menu-wrap .toggler:checked + .hamburger>div{
/*the + .hamburger>div allows us to not actually style the checkbox*/
transform: rotate(135deg);
}

/*Turn lines into X*/
.menu-wrap .toggler:checked + .hamburger>div:before,
.menu-wrap .toggler:checked + .hamburger>div:after{
	top:0;
	transform: rotate(90deg);
}
/*Rotate on hover when checked*/
.menu-wrap .toggler:checked:hover + .hamburger>div{
	transform: rotate(225deg);
}

.menu-wrap .menu{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	visibility: hidden;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

/*Show Menu*/
.menu-wrap .toggler:checked ~ .menu{
	visibility: visible;
}
.menu-wrap .toggler:checked ~ .menu>div{
	transform: scale(1);
	transition-duration: 0.4s;
}

.menu-wrap .toggler:checked ~ .menu>div>div{
	opacity: 1;
	transition: opacity 0.4s ease;
}

.menu-wrap .menu>div{
	background-color: gray;
	opacity: 0.82;
	border-radius: 50%;
	width: 200vw;
	height: 200vw;
	/*200vw allows it to extend past the screen*/
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	/*transform: scale gives us the effect of shooting out from the middle*/
	transform: scale(0);
	/* at 0 it will be invisible b/c it is scaled down to 0*/
	transition: all 0.4s ease;

}

.menu-wrap .menu>div>div{
	text-align: center;
	max-width: 90vw;
	max-height: 100vh;
	opacity: 0;
	transition: opacity 0.4s ease;
}
.menu-wrap .menu>div>div>ul>li{
	list-style: none;
	color: white;
	font-size: 1.5rem;
	padding: 1rem;
}
.menu-wrap .menu>div>div>ul>li>a{
	color: inherit;
	text-decoration: none;
	transition: color 0.4s ease;
}

.first-nav{
	display: none;
}


.social-icons{
	display: grid;
	grid-template-columns: repeat(4, 6rem);
}

.social-icon-item{
	text-align: left;
}

}

@media screen and (max-width:1046px){
	.DN{
	height: 40vh;
	width: auto;
	float: right;
	margin: 1rem;
}
}

@media screen and (max-width: 701px){
	.DN{
	height: 40vh;
	width: auto;
	float: none;
}
}

.forms-wrapper{
	background-color: #eee;
	position: fixed;
	top: 10%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1000;
	padding: 2rem;
	border: .1rem solid #3459af;
	border-radius: .3rem;
	display: none;
}


.form-heading{
	font-size: 1.3rem;
	color: #12376e;
	text-transform: uppercase;
	padding: 1rem 0 0 .2rem;
	text-align: center;
}

.forms-wrapper form{
	width: 30rem;
	padding: 1rem;
	padding-top: 0.5rem;
}

.forms-wrapper form input:not(.form-btn){
	background-color: #fff;
	color: #777;
	padding: 1.3rem;
	margin: 0.3rem 0;
	border: .2rem solid #eee;
	box-sizing: border-box;
	outline: none;
}

.forms-wrapper form textarea{
	background-color: #fff;
	color: #777;
	padding: 1.3rem;
	margin: 0.3rem 0;
	border: .2rem solid #eee;
	box-sizing: border-box;
	outline: none;
	width: 100%;
}

.fullname-inputs-wrapper{
	display: flex; /*makes sure they are displayed side by side no matter what*/

}

.fullname-inputs-wrapper input{
	width: 50%;
}

.form-input{
	width: 100%;
}

.form-btn{
	width: 35%;
	background-color: #d38800;
	color: white;
	letter-spacing: .3rem;
	padding: 1rem;
	border: none;
	margin-top: .5rem;
	cursor: pointer;
}

.x-btn{
	font-size: 2rem;
	color: #00154c;
	font-weight: bolder;
	position: absolute;
	bottom: 3.3rem;
	right: 3.5rem;
	cursor: pointer;
}

#show-hide-form:checked ~.forms-wrapper{
	display: block;
}

#show-hide-form{
	display: none;
}

@media screen and (max-width: 480px){
		.social-icons{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-column: 1/3;
}
}