@charset "UTF-8";
@import url(font-awesome.min.css);
@import url(http://fonts.googleapis.com/css?family=Raleway:700,400);
@import url(https://fonts.googleapis.com/css?family=Nunito);

* {
	margin: 0;
	padding: 0;
}

.base {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	background-image: url(../images/dark_tint.png), url(../images/bokeh_car_lights_bg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	z-index: 0;
}

.form {
	display: flex;
	align-items: center;
	flex-direction: column;
	padding: 2em;
	width: 25%;
	background-color: rgb(255, 255, 255, 0.3);
	backdrop-filter: blur(10px);
	border-radius: 25px;
	z-index: 0;
}

.content {
	width: 100%;
	font-size: 1.4em;
	color: rgb(255, 255, 255);
	font-family: Nunito;
	z-index: 0;
}

	.content > ul {
		list-style: none;
		padding-left: 0;
	}
	.content > ul > a > li {
		margin-top: 0.4em;
	}


	.content .fa-folder {
		-moz-osx-font-smoothing: grayscale;
		-webkit-font-smoothing: antialiased;
		font-family: FontAwesome;
		font-style: normal;
		font-weight: normal;
		text-transform: none !important;
		font-size: 1.4em;
	}


	.content .fa-code {
		-moz-osx-font-smoothing: grayscale;
		-webkit-font-smoothing: antialiased;
		font-family: FontAwesome;
		font-style: normal;
		font-weight: normal;
		text-transform: none !important;
		font-size: 1.4em;
		z-index: 0;
	}

	.content .fa-envelope {
		-moz-osx-font-smoothing: grayscale;
		-webkit-font-smoothing: antialiased;
		font-family: FontAwesome;
		font-style: normal;
		font-weight: normal;
		text-transform: none !important;
		font-size: 1.4em;
		z-index: 0;
	}


	.boton {
		padding: 1em;
		border-radius: 15px;
		border: 1px solid lightgray;
		display: flex;
		align-items: center;
		overflow: hidden;
	}

	.boton:hover {
		content: "";
		transition: all 1s;
		background: lightyellow;
		z-index: -1;
		color: #000000;
		border: 1px solid lightyellow;
	}

	a {
		text-decoration: none;
		color: inherit;
	}

	.label{
		margin-left: 0.5em;
	}


	.content .footer {
		width: 100%;
		text-align: center;
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		font-style: normal;
		font-weight: normal;
		text-transform: none !important;
		font-size: 0.7em;
	}


/* LISTA */

ol {
	list-style: decimal;
	margin: 0 0 2em 0;
	padding-left: 1.25em;
}

	ol li {
		padding-left: 0.25em;
	}

ul {
	list-style: disc;
	margin: 0 0 2em 0;
	padding-left: 1em;
}

	ul li {
		padding-left: 0.5em;
	}

	ul.alt {
		list-style: none;
		padding-left: 0;
	}

		ul.alt li {
			border-top: solid 1px rgba(144, 144, 144, 0.25);
			padding: 0.5em 0;
		}

			ul.alt li:first-child {
				border-top: 0;
				padding-top: 0;
			}

	ul.unstyled {
		list-style: none;
		padding-left: 0;
	}

		ul.unstyled li {
			padding: 0.4em 0;
		}

	ul.icons {
		display: flex;
		width: 100%;
		justify-content: center;
		cursor: default;
		list-style: none;
		padding-left: 0;

	}

		ul.icons li {
			display: inline-block;
			padding: 0 1em 0 0;
		}

			ul.icons li:last-child {
				padding-right: 0;
			}

			ul.icons li .icon:before {
				font-size: 2em;
			}

		dl {
			margin: 0 0 2em 0;
		}


/* ICONOS */

.icon {
	text-decoration: none;
	border-bottom: none;
	position: relative;
}

	.icon:before {
		-moz-osx-font-smoothing: grayscale;
		-webkit-font-smoothing: antialiased;
		font-family: FontAwesome;
		font-style: normal;
		font-weight: normal;
		text-transform: none !important;
	}

	.icon:active, .icon:hover {
		text-decoration: none;
	}

	.icon > .label {
		display: none;
	}

	.icon.rounded {
		background-color: #383b43;
		border-radius: 100%;
		color: #ffffff;
		display: inline-block;
		height: 3.25em;
		line-height: 3.25em;
		text-align: center;
		width: 3.25em;
	}

		.icon.rounded.big {
			font-size: 2.5em;
			margin-bottom: 0.5em;
		}
		/*Azul Claro*/
		.icon.rounded.color1 {
			background-color: #3cadd4;
		}
		/*Azul Fuerte*/
		.icon.rounded.color2 {
			background-color: #3c61d4;
		}
		/*Lila*/
		.icon.rounded.color3 {
			background-color: #633cd4;
		}
		/*Purpura*/
		.icon.rounded.color4 {
			background-color: #af3cd4;
		}
		/*Rosa Fucsia*/
		.icon.rounded.color5 {
			background-color: #d43cad;
		}
		/*Rosa Rojo*/
		.icon.rounded.color6 {
			background-color: #d43c61;
		}
		/*Naranja Salmon*/
		.icon.rounded.color7 {
			background-color: #d4633c;
		}
		/*Dorado*/
		.icon.rounded.color8 {
			background-color: #d4af3c;
		}
		/*Verde Pistacho*/
		.icon.rounded.color9 {
			background-color: #add43c;
		}
		/*Verde Lima*/
		.icon.rounded.color10 {
			background-color: #61d43c;
		}

		.icon.rounded.fa-twitter {
			background-color: #2daae4;
		}

		.icon.rounded.fa-facebook {
			background-color: #39599f;
		}

		.icon.rounded.fa-google-plus {
			background-color: #c91e1f;
		}

		.icon.rounded.fa-dribbble {
			background-color: #c4376b;
		}

		.icon.rounded.fa-tumblr, .icon.rounded.fa-linkedin {
			background-color: #31516a;
		}
		
		.icon.rounded.fa-instagram {
			background: #f09433; 
			background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 
			background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
			background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
		}
		
		.icon.rounded.fa-github {
			background-color: #222223;
		}
		
		.icon.rounded.fa-spotify {
			background-color: #0e9e41; /* 1DB954 */
		}		

		.icon.rounded.fa-rss {
			background-color: #f2600b;
		}



/* Media Queries */

@media only screen and (max-width: 325px) {
	.form {
		width: 95% !important;
	}
}

@media only screen and (max-width: 450px) and (min-width: 325px){
	.form {
		width: 95%;
	}
}

@media only screen and (max-width: 645px) and (min-width: 450px) {
	.form {
		width: 80%;
	}
}
		
@media only screen and (max-width: 950px)  and (min-width: 645px){
	.form {
		width: 50%;
	}
}

@media only screen and (max-width: 1500px)  and (min-width: 950px){
	.form {
		width: 35%;
	}
}