@charset "utf-8";
/* CSS Document */

#unete{
	margin:0;
	padding:0;
	background-image:url(../img/unete.png);
	background-position:center;
	background-size:cover;
	background-repeat:no-repeat;
	width:100%;
	height:auto;
	position:relative;	
}

#unete h1{
	width:100%;	
	font-family: 'Avenir Next LT Pro Bold';
	text-align:center;
	color:white;
	font-size:26px;
}


.Uphoto{
	width:70%;
	height:auto;
	margin:auto;
	margin-bottom:6%;	
}

.Uphoto img{
	width:100%;	
}

.form{
	width:90%;
	height:auto;
	margin:auto;	
}

.form p{
	text-align:center;	
}

.form a{
	color:black;	
}

.archivo{
	width:100%;
	height:auto;
	background:#eaeaea;
	border-radius:10px;
	margin-bottom:3.5%;	
}

form input{
	width:98%;
	font-family: 'Avenir Next LT Pro Regular';
	padding:2.5% 0;
	padding-left:2%;
    border-radius:10px;
	border:none;
	margin-bottom:3.5%;
    background:#eaeaea;
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:#999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:#999;
   opacity: 1 /* esto es porque Firefox le reduce la opacidad por defecto */;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:#999;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:#999;
}
#file-upload {
    position: absolute;
    left: -9999px;
}

label[for="file-upload"]{
	font-family: 'Avenir Next LT Pro Regular';
	width:40%;	
  	padding:3% 2%;  
  	display:inline-block;
  	cursor:pointer;
  	background:#b9b9b9;
  	color:white;
  	border-radius:15px;
	font-size:14px;
	text-align:center;
}

#filename{
    float:left;
    width:60%;
    overflow:hidden;
	font-family: 'Avenir Next LT Pro Regular';
	padding:0% 0;
	margin-top:2.5%;
	padding-left:2%;
	font-size:14px;
	color:#999;
}

textarea{
	width:98%;
	height:25vw;
	font-family: 'Avenir Next LT Pro Regular';
	resize:none;
	padding:2.5% 0;
	padding-left:2%;
    border-radius:10px;
	border:none;
    background:#eaeaea;		
}

input[type="submit"]{
	width:30%;
	margin-left:70%;
	background:#ea7c07;
	color:white;	
}


@media screen and (min-width: 768px) {
	#unete h1{
		margin-bottom:6%;	
	}
	
	.Uphoto{
		width:40%;
		display:inline-block;
		vertical-align:top;
		margin:0 5%;	
	}
	
	.form{
		width:40%;	
		display:inline-block;	
	}
	
	textarea{
		height:10vw;	
	}
	
	input[type="submit"]{
		width:40%;
		margin-left:0;
		margin-left:60%;
		margin-top:2%;	
	}
}

@media screen and (min-width: 1024px) {
	.Uphoto{
		width:30%;
		margin-left:15%;	
	}
	
	.form{
		width:35%;	
	}
	
	form input, #filename, label[for="file-upload"]{
		font-size:12px;	
	}
	label[for="file-upload"]{
		width:36%;
	}
	
	#filename{
		width:64%;
		margin-top:2.5%;
	}
	
	.archivo{
		padding:0;	
	}
	
}

@media screen and (min-width: 1366px) {
	form input, #filename, label[for="file-upload"]{
		font-size:14px;	
	}
	
	.archivo{
		width:98%;	
	}
	
	#filename{
		width:67%;	
	}
	
	label[for="file-upload"]{
		width:33%;
		right:0;
	}
}