/* Base Styles
   ========================================================================== */

* {
	box-sizing:border-box;
}

body{
	font-family: 'Merriweather', serif;

}



h1 {
	text-align: center;
}

h2 {
	text-align: center;
	font-size:1.2em;
}

header, footer {

	background-color: #2d3945;
	color:#fff;
}

footer .container {

	padding:10px;
	height:60px;
	margin-top: 50px;
	font-style: italic;
	text-align: center;

}

.directions {
	border-bottom: 3px solid #2d3945;
}

.directions p {
	color:#b1b5b9;
	text-align: center;
}


.contactForm {

	border-top: 1px solid #2d3945;
	margin-top:2px;


}

.wrapper {
	min-height: calc(100vh-60px);
}


header .container, .container {
	margin:0 auto;
	padding: 1em;
}



.container {
		margin: 2px  auto;
		padding: 10px;

}

[name="contactInfo"] div {
	display: flex;
	flex-direction:column;
	flex-wrap:wrap;
}



/* Form Styles
   ========================================================================== */


label {
	color: #6e7d8d;
}

input[type="text"]{
text-align: left;


}



input::placeholder {
text-align: right;
color:#adb2b7;
font-style: italic;

}

textarea
 {
	max-width:100%; 
	width:100%;

}



[type = "text"],
[type ="email"],
[type = "tel"], 
textarea,
select
 {
	background-color: #eff0f1;
	height:50px;
	border: none;
	padding:0 10px;
	transition-property: border-bottom, background-color;
	transition-duration: .8s
}

#zipCode {
	background-color: #eff0f1;
	max-width:50%;
	width:50%;
	transition-property: border-bottom, background-color;
	transition-duration: .8s;


}


[type = "text"]:focus,
[type ="email"]:focus,
[type = "tel"]:focus, 
textarea:focus,
#zipCode:focus,
select:focus
 {
 	border-bottom: 3px solid #2d3945;
 	background-color: white;


}


textarea {

	height:200px;
}




legend {
	font-size:1.2em;
	color:#2d3945;
	font-weight: bold;
}



fieldset {
	border:none;
	margin: 10px;
	padding: 0px;
}





button[type="submit"] {
	background-color: #4ebbb5;
	max-width:100%;
	width:100%;
	border:none;
	padding:10px;
	margin-top:20px;
	color:#fff;
	font-size:2em;
	border-radius: 5px;

}



label + input[type="text"],  
label + input[type="tel"],
label + input[type="email"],
label + select  {
	margin: 5px  0 20px;

}

label[for="topicsInput"]  {
	padding:20px 0;
	display: inline-block;
}




[type="radio"] + label {
	display: block;
	padding-bottom: 10px;
}

input[type="checkbox"] + label {
display: block;
padding-bottom:10px;
}






/************************************************
*Custom Checkkbox
*************************************************/
:root input[type="checkbox"] {
  /* original check box are push outside the viewport */
  position: absolute;
  left: -1000em;
}

:root input[type="checkbox"] + label:before {
  content: "";
  display: inline-block;
  width  : 16px;
  height : 16px;
  margin : 0 .5em 0 0;
  background: url("../images/checkbox.jpg") no-repeat 0 0;

/* The following is used to adjust the position of 
   the check boxes on the text baseline */

  vertical-align: bottom;
  position: relative;
  bottom: 2px;
}

:root input[type="checkbox"]:checked + label:before {
  background-position: 0 -16px;
}

:root input[type="checkbox"]:disabled + label:before {
  background-position: 0 -32px;
}

:root input[type="checkbox"]:checked:disabled + label:before {
  background-position: 0 -48px;
}

:root input[type="checkbox"]:focus + label:before {
  outline: 1px dotted black;
}

/************************************************
* Custom Radio
*************************************************/
:root input[type="radio"] {
  /* original check box are push outside the viewport */
  position: absolute;
  left: -1000em;
}

:root input[type="radio"] + label:before {
  content: "";
  display: inline-block;
  width  : 16px;
  height : 16px;
  margin : 0 .5em 0 0;
  background: url("../images/radio.jpg") no-repeat 0 0;

/* The following is used to adjust the position of 
   the check boxes on the text baseline */

  vertical-align: bottom;
  position: relative;
  bottom: 2px;
}

:root input[type="radio"]:checked + label:before {
  background-position: 0 -16px;
}

:root input[type="radio"]:disabled + label:before {
  background-position: 0 -32px;
}

:root input[type="radio"]:checked:disabled + label:before {
  background-position: 0 -48px;
}

:root input[type="radio"]:focus + label:before {
  outline: 1px dotted black;
}



@media (min-width:768px){

	.container {
		max-width: 1024px;
	}



[name="contactInfo"] div {
	display: flex;
	flex-direction:row;
	flex-wrap:wrap;


}


	input[type="text"],
	input[type="tel"],
	input[type="email"],
	select

	{
				
		width: 80%;
		justify-content: flex-end;
	}

	#zipCode {
		width: 30%;
	}

	

	[name="contactInfo"] label {

		width: 20%;

	}




}