@charset "utf-8";

/* CSS Document */



/*responsive form */







/* Style the container */

.container {

  border-radius: 20px;

  background-color: #f2f2f2;

 

  padding: 20px;

  max-width: 500px;

  width: 100%;

  margin: auto;

}

.window {

  border-radius: 20px;

  background-color: #f2f2f2;

 

  padding: 10px;

  max-width: 450px;

  width: 70%;

  margin: auto;

}



/* Style the label to display next to the inputs */

label {

  padding: 12px 12px 12px 30px;

  display: inline-block;

  font-family: "Great Vibes", sans-serif;

  color:#09F;

  font-size:17px;

}



input[type=text], select, textarea{

  width: 80%;

  padding: 20px;

  border: 1px solid #ccc;

  border-radius: 14px;

  box-sizing: border-box;

  resize: vertical;

  font-family: "Roboto Condensed", sans-serif;

  font-size:16px;

  color:#930;

}

input[type=tel]



{

  width: 100%;

  padding: 10px;

  border: 1px solid #ccc;

  border-radius: 14px;

  box-sizing: border-box;

  resize: vertical;

  font-family: "Roboto Condensed", sans-serif;

  font-size:16px;

  color:#36F;

  text-align:center;

}



input[type=email]



{

  width: 50%;

  padding: 10px;

  border: 1px solid #ccc;

  border-radius: 14px;

  box-sizing: border-box;

  resize: vertical;

  font-family: "Roboto Condensed", sans-serif;

  font-size:16px;

  color:#390;

  text-align:left;

}



input[type=file]



{

  width: 100%;

  padding: 10px;

  border: 1px solid #ccc;

  border-radius: 14px;

  box-sizing: border-box;

  resize: vertical;

  font-family: "Roboto Condensed", sans-serif;

  font-size:16px;

  color:#FFF;

  text-align:center;

  background-color: #4CAF50;

}





/* Style the submit button */

input[type=submit] {

  background-color: #4CAF50;

  color: white;

  padding: 12px 20px;

  border: 2px solid #ccc;

  border-radius: 10px;

  cursor: pointer;

  float: right;

}



textarea {

    display: block;

	background-color: #FFF;

    width: 100%;

    -webkit-box-sizing: border-box;

       -moz-box-sizing: border-box;

            box-sizing: border-box;

}



/* Floating column for labels: 25% width */

.col-25 {

  float: left;

  width: 25%;

  margin-top: 6px;

}



/* Floating column for inputs: 75% width */

.col-75 {

  float: left;

  width: 75%;

  margin-top: 6px;

}



/* makes the container take in all the input windows [Clear floats after the columns] */

.row:after {

  content: "";

  display: table;

  clear: both;

}



input[type='radio'] {

  -webkit-appearance:none;

  width:20px;

  height:20px;

  border:1px solid darkgray;

  border-radius:50%;

  outline:none;

  box-shadow:0 0 5px 0px gray inset;

}



input[type='radio']:hover {

  box-shadow:0 0 5px 0px orange inset;

}



input[type='radio']:before {

  content:'';

  display:block;

  width:60%;

  height:60%;

  margin: 20% auto;    

  border-radius:50%;    

}

input[type='radio']:checked:before {

  background:green;

}



.button {

	cursor:pointer;

	-moz-box-shadow:inset 0px 1px 0px 0px #fce2c1;

	-webkit-box-shadow:inset 0px 1px 0px 0px #fce2c1;

	box-shadow:inset 0px 1px 0px 0px #fce2c1;

	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffc477), color-stop(1, #fb9e25) );

	background:-moz-linear-gradient( center top, #ffc477 5%, #fb9e25 100% );

	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc477', endColorstr='#fb9e25');

	background-color:#ffc477;

	-webkit-border-radius:16px;

	-moz-border-radius:16px;

	border-radius:16px;

	border:1px solid #eeb44f;

	color:#ffffff;

	font-family:Arial;

	font-size:16px;

	width:120px;

	font-weight:bold;

	text-align: center;

	text-shadow:1px 1px 0px #cc9f52;

}

.button:hover {

	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fb9e25), color-stop(1, #ffc477) );

	background:-moz-linear-gradient( center top, #fb9e25 5%, #ffc477 100% );

	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fb9e25', endColorstr='#ffc477');

	background-color:#3F3;
	
	color:#3F3;

}



.form-div { 

margin-top: 100px; 

border: 1px solid #e0e0e0; }



/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */

@media screen and (max-width: 600px) {

  .col-25, .col-75, input[type=submit] {

    width: 100%;

    margin-top: 0;

  }

}