/* TRANSFORMER */

.transformer{
	width: 70%;
	height: 40px;

	-webkit-transition: width 0.7s; /* Safari */
    transition: width 0.7s;
    margin: auto;
    
	position: relative;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
}
.cont_shw{
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;

	-webkit-box-shadow: 0 0 10px #ccc;
	-moz-box-shadow: 0 0 10px #ccc;
	box-shadow: 0 0 10px #ccc;
}
.url_input {
	font: 25px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	color: #515151;
	width: 100%;
	height: 30px;
	border: 1px solid #333;
	padding: 5px 66px 5px 45px;
	
	/* Firefox */
	width: -moz-calc(100% - 113px);
	/* WebKit */
	width: -webkit-calc(100% - 113px);
	/* Opera */
	width: -o-calc(100% - 113px);
	/* Standard */
	width: calc(100% - 113px);

	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;

	-webkit-box-shadow: inset 0 0 4px -1px #000;
	-moz-box-shadow: inset 0 0 4px -1px #000;
	box-shadow: inset 0 0 5px -1px #666;
}
.url_input:focus { 
	outline: none;
	-webkit-box-shadow: 0 0 5px #09f, inset 0 0 4px -1px #000;
	-moz-box-shadow: 0 0 5px #09f, inset 0 0 4px -1px #000;
	box-shadow: 0 0 5px #09f, inset 0 0 4px -1px #000;
}
.cont_shw:before {
	color: #a9a9a9;
    content:"\f0c1";
    position: absolute;
    top: 6px;
    left: 10px;
    z-index: 1;
	font: 30px 'FontAwesome';
}
span.url_submit {
	font: 20px/38px "Lucida Grande", Lucida, Verdana, sans-serif;
	text-align: center;
	color: #feffff;
	background-color: #09f;
 	cursor: pointer;
	width: 50px;
	height: 100%;
	position: absolute;
	
	
	-webkit-border-radius: 0 3px 3px 0;
	-moz-border-radius: 0 3px 3px 0;
	border-radius: 0 3px 3px 0;
	
	-webkit-box-shadow: inset 0 0 4px -1px #000;
	-moz-box-shadow: inset 0 0 4px -1px #000;
	box-shadow: inset 0 0 4px -1px #000;
	display: block;
	top: 1px;
	right: 1px;
}
span.url_submit:hover {
	background-color: #0084de;
	-webkit-box-shadow: inset 0 0 5px -1px #333;
	-moz-box-shadow: inset 0 0 5px -1px #333;
	box-shadow: inset 0 0 6px -1px #333;
	color: #e4e4e3;
}


span.url_options {
	font: normal 16px/38px "Lucida Grande", Lucida, Verdana, sans-serif;
	text-align: center;
	color: #feffff;
	background-color: silver;
	width: 50px;
	height: 100%;
	cursor: pointer;
	position: absolute;
	top: 1px;
	right: 50px;
	display: block;
	z-index: 1;
	
	-webkit-box-shadow: inset 0 0 4px -1px #000;
	-moz-box-shadow: inset 0 0 4px -1px #000;
	box-shadow: inset 0 0 4px -1px #000;
}
span.url_options:hover {
	background-color: #a9a9a9;
	-webkit-box-shadow: inset 0 0 5px -1px #333;
	-moz-box-shadow: inset 0 0 5px -1px #333;
	box-shadow: inset 0 0 6px -1px #333;
	color: #e4e4e3;
}
span.url_new {
	font: normal 16px/38px "Lucida Grande", Lucida, Verdana, sans-serif;
	text-align: center;
	color: #feffff;
	background-color: #09f;
	width: 50px;
	height: 100%;
	cursor: pointer;
	position: absolute;
	top: 1px;
	display: none;
	
	-webkit-box-shadow: inset 0 0 4px -1px #000;
	-moz-box-shadow: inset 0 0 4px -1px #000;
	box-shadow: inset 0 0 4px -1px #000;
	right: 50px;
	
}
span.url_new:hover {
	background-color: #0084de;
	-webkit-box-shadow: inset 0 0 5px -1px #333;
	-moz-box-shadow: inset 0 0 5px -1px #333;
	box-shadow: inset 0 0 6px -1px #333;
	color: #e4e4e3;
}

@media only screen and (min-width: 550px) , (max-width: 510px){
	span.url_copy {
		font: 11px "Lucida Grande", Lucida, Verdana, sans-serif;
		text-align: center;
		color: #feffff;
		background-color: #ff7300;
		width: 80px;
		height: 100%;
		cursor: pointer;
		position: absolute;
		top: 1px;
		right: 50px;
		cursor:default;
		display: block;
		
		-webkit-box-shadow: inset 0 0 4px -1px #000;
		-moz-box-shadow: inset 0 0 4px -1px #000;
		box-shadow: inset 0 0 4px -1px #000;
		display: none;
	}
	span.url_copy span {
		position: relative;
		top: 6px;
	}
}

.fa_zoom_1-5{
	font-size: 1.5em;
	vertical-align: -10%;
}
.fa_zoom_1-2{
	font-size: 1.2em;
	vertical-align: -13%;
}
@media only screen and (max-height: 550px) , (max-width: 510px){
	.transformer{
	width: 90%;
	height: 40px;

	-webkit-transition: width 1s; /* Safari */
    transition: width 1s;
    
	position: absolute;
	bottom: 0;
	right: 0;
	top: 0;
	left: 0;
	margin-right: auto;
	margin-left: auto;
	margin-top: 40px;
	}
}
.hide{
	display: none;
}