/* Survey page styles */

.photo{
  width: 60%;
  padding: 10px;
}

form {
  margin: 0 auto;
  text-align: left;
  display: inline-block;
}

.container{
  text-align: left;
  max-width: 282px;
  margin: auto;
}

.container2{
  text-align: right;
  max-width: 180px;
  margin: auto;
}
.newsletter{
  text-align: right;
}

fieldset{
	border: none;
	margin-top: 1em;
}

legend{
	width: 100%;
}

legend h1{
	text-align: center;
}

.radiofs{
	padding: 0;
	margin: 0;
}

.radiogp{
	text-align: left;
}

.sally{
	display: inline-block;
}

input[type="radio"]:focus+label{
	color: white;
	text-transform: uppercase;
}

select, textarea{
	border: 5px solid transparent;
	transition: all .5s;
}

select:focus, textarea:focus{
	border: 5px solid #bcf980;
	border-radius: 10px;
	background-color: blue;
	color: white;
}

textarea:focus::-webkit-input-placeholder{
	color: white;
}

textarea:focus::-moz-placeholder{
	color: white;
}

input[type="text"], input[type="email"]{
	transition: all .5s;
}

input[type="text"]:focus, input[type="email"]:focus{
	background-color: blue;
	border: 2px solid red;
	color: white;
}

button:focus{
	box-shadow: 0 0 20px 13px orange;
}

#radioinput1, #radioinput2, #radioinput3, #radioinput4, #selectinput,
#textareainput, #nameinput, #emailinput, #retypeemailinput, #buttoninput{
	display: none;
}

.radiogp{
	padding-bottom: 1em;
}

@media screen and (min-width: 368px) {
		.container2{
			max-width: 282px;
		}
}

/* Styles for larger screens */
@media screen and (min-width: 840px) {
  .photo{
    width: 40%;
  }
}