﻿.wrap-custom-file
{
	position: relative;
	display: inline-block;
	width: 150px;
	height: 150px;
	margin: 0 1rem 1rem;
	text-align: center;
}

	.wrap-custom-file input[type="file"]
	{
		position: absolute;
		top: 0;
		left: 0;
		width: 2px;
		height: 2px;
		overflow: hidden;
		opacity: 0;
	}

	.wrap-custom-file label
	{
		z-index: 1;
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		overflow: hidden;
		padding: 0 0.5rem;
		cursor: pointer;
		background-color: #EEEEEE;
		border: 1px solid #FF1174;
		color: #333333;
		border-radius: 4px;
		-webkit-transition: -webkit-transform 0.4s;
		transition: -webkit-transform 0.4s;
		transition: transform 0.4s;
		transition: transform 0.4s, -webkit-transform 0.4s;
	}

		.wrap-custom-file label span
		{
			display: block;
			margin-top: 2rem;
			-webkit-transition: color 0.4s;
			transition: color 0.4s;
		}

		.wrap-custom-file label .fa
		{
			position: absolute;
			bottom: 1rem;
			left: 50%;
			-webkit-transform: translatex(-50%);
			transform: translatex(-50%);
			font-size: 1.5rem;
			color: lightcoral;
			-webkit-transition: color 0.4s;
			transition: color 0.4s;
		}

	.wrap-custom-file button
	{
		position: absolute;
		top: 1rem;
		left: 100%;
		-webkit-transform: translatex(-10%);
		transform: translatex(-10%);
		font-size: 1.5rem;
		color: #FF1174;
		background: #EEEEEE;
		border: 0px solid;
		-webkit-transition: color 0.4s;
		transition: color 0.4s;
	}

		.wrap-custom-file button:hover
		{
			background: #EEEEEE;
		}

	.wrap-custom-file label:hover
	{
		-webkit-transform: translateY(-1rem);
		transform: translateY(-1rem);
	}

		.wrap-custom-file label:hover span, .wrap-custom-file label:hover .fa
		{
			color: #333;
		}

	.wrap-custom-file label.file-ok
	{
		background-size: cover;
		background-position: center;
	}

		.wrap-custom-file label.file-ok span
		{
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			padding: 0.3rem;
			font-size: 1.1rem;
			color: #000;
			background-color: rgba(255, 255, 255, 0.7);
		}

		.wrap-custom-file label.file-ok .fa
		{
			display: none;
		}
