/* Primary */




a {
	text-decoration: none;
}

/* Button and the icon */


.center {
/*	display: table-cell; */
	vertical-align: middle;
	
    margin-top: 100px;
}

.trigger {
    position: relative;
    background: #a85400;
    display: inline-block;
    width: 196px;
    height: 50px;
    border-radius: 50em;
    /* box-shadow: 0 2px 20px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.2); */
    color: #ffffff;
    padding-top: 15px;
    padding-left: 20px;
    margin-top: 30px;
}


em, i {
	transition: top 0.3s;
}

span {
	/*
	uncomment this to see where actually the
	Download and SVG located on initial state
	and on hover
	*/
	overflow: hidden;
}

em {
	line-height: 60px; /*make the button text vertically center of the button*/
	top: 0;
}

i {
	top: 100%; /*moving out the SVG to the bottom on page loads*/
  padding-top:20px;
}

i::before {
  content: "\f019";
  font-family: FontAwesome;
  font-size: 1rem;
}

.trigger:hover em {
	top: -100%; /* move the Download text to the top*/
}

.trigger:hover i {
	top: 0;
}

/*Tooltip*/
.trigger::before,
.trigger::after {
	position: absolute;
	opacity: 0; /*hide on page load*/
	visibility: hidden; /*to stop interaction when user hover on top of the button*/
	transition: all 0.3s;
}
/*
.trigger::before {
	content: "File size: 50M";
	width: 140px;
	height: 60px;
	line-height: 60px; 
	background: #075305;
	border-radius: 0.25em;
	bottom: 90px;
	left: calc(50% - 70px); 
}
*/

/*the triangle below the `File size` box*/
/*
.trigger::after {
	content: "";
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-top-color: #075305;
	left: calc(50% - 10px); 
	bottom: 70px;
}
*/
.trigger:hover::before,
.trigger:hover::after {
	opacity: 1;
	visibility: visible;
}

/*pull down effect for the `File size` box when we hover the button*/
.trigger:hover::before {
	bottom: 80px;
}

.trigger:hover::after {
	bottom: 60px;
}