/* CSS Document */

.form{
align-items: center;
    -webkit-align-items:center;
}

form, .p_contact, .dati_email{
	width:100%; 
	max-width:730px;	
	}


form{
	background-color: rgb(29,29,29);
	display: flex;
    display: -webkit-flex;
	flex-flow:row wrap;
	-webkit-flex-flow:row wrap;
	justify-content: center;
   -webkit-justify-content: center;
   align-items: flex-start;
   -webkit-align-items: flex-start;
   border-radius:5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
	font-size:1.0rem;
	border: 1px solid rgb(76,76,76);
	margin-top:20px;
	padding:30px 0px;
}

.dati_email{
	background-color:rgb(29,29,29);
	margin:10px 0px;
	border:1px solid rgb(174,174,174);
	border-radius:5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

.dati_email p{
	padding:10px;
	margin:0px;
}

/*input:invalid { background-color: red;}
input:required { border: solid 2px green;}*/

.label{
	margin: 10px 10px 5px 10px;
	text-align:right;
	border: 0px solid green;
}

.input{
		padding:3px 5px;
	margin: 10px;
	height: 25px;
}
			
input,textarea{
	background: rgb(220,220,220);
    color: rgb(0,0,0);
	border-radius:3px;
	-webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}

/* Focus sui campi */
input:focus, textarea:focus, .focus {
   border:2px solid rgb(255,255,255);
   color: rgb(0,0,0);
   -webkit-box-shadow:0 0 16px rgb(255,255,255); /* i primi due valori, in questo caso due zeri, rappresentano lo spostamento dell’ombra rispettivamente in orizzontale e in verticale, il terzo (16px) la sfocatura e il quarto (facoltativo e in questo caso assente) la diffusione. */
   -moz-box-shadow:0 0 16px rgb(255,255,255);
   box-shadow: 0 0 16px rgb(255,255,255);
   outline:none; /* per evitare un fastidioso effetto ‘doppio-bordo’ su Chrome */
}

<!--[if lte IE 7]>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $('input,textarea').focus(function(){
        $(this).addClass('focus');
    });
    $('input,textarea').blur(function(){
        $(this).removeClass('focus');
    });
});
</script>
<![endif]-->


form{
	margin-top: 10px;
}
		
textarea,button {
	margin: 10px;
			}
			
input{
	line-height:30px;
}
	
textarea{
	    width:300px;
		height: 180px;
	    font-size: 1rem;
	    overflow: hidden;
		padding:3px 5px;
		text-align:left;
}

button{
	background: rgb(181,181,181);
		color: rgb(14,14,14);
		line-height:30px;
		padding:0px 5px;
		text-align:center;
		border-radius:5px;
		-webkit-border-radius: 5px;
        -moz-border-radius: 5px;
}	
.button{
	width:70px;
}

.invia{
	width:100%;
    display: flex;
	display:-webkit-flex;
	justify-content: center;
	-webkit-justify-content: center;
    align-items: center;
	-webkit-align-items: center;
	border:0px solid blue;
}


.new-checkbox {
  position: absolute;
  opacity: 0;
}
.new-checkbox + label {
  position: relative;
  cursor: pointer;
  padding: 0;
}
.new-checkbox + label:before {
  content: '';
  margin: 0px;
  display: inline-block;
  vertical-align: text-top;
  width: 20px;
  height: 20px;
  background: rgb(220,220,220);
  border:1px solid #4c4c4c;
  border-radius:3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
}
.new-checkbox:hover + label:before {
  background: rgb(255,255,255);
}
.new-checkbox:checked + label:before {
  background: rgb(220,220,220);
}
.new-checkbox:checked + label:after {
  content: '\f00c';
  font-family:'Font Awesome 5 Free';
  font-weight:900;
  font-size:13px;
  color: rgb(0,0,0);
  position: absolute;
  left: 4px;
  top: 3px;
}

.privacy{
	display: flex;
    display: -webkit-flex;
	width:100%;
	margin:0px 10px;
	border:0px solid red;
}

@media only screen 
and (min-device-width : 708px){
.label{
	width:240px;
}

.input{
	width:300px;
	text-align:left;
}

}

@media only screen 
and (max-device-width : 707px){
.label{
	width:100%;
}	

.top{
	margin-top:0px;
}
.input{
	width:100%;
	max-width:300px;
	text-align:center;
}

.center{
text-align:center;
}

}