fixed-flag.css

/* Fixed Flag on Side of Screen */
#fixed-flag {
	background: #fff;
	position: fixed;
	top: 120px;
	right: 0;
	z-index: 999;
	border-radius: 4px 0 0 4px;
}
#fixed-flag a {
	background-image: linear-gradient(to bottom, #fff, #eee);
	display: block;
	position: relative;
	padding: 16px 50px 16px 16px;
	font-size: 16px;
	font-weight: 700;
	color: #005e29;
	line-height: 1.1;
	text-align: right;
	box-shadow: inset 0 -2px 0 0 #fff, 1px 1px 4px 0 rgba(0, 0, 0, .35);
	border-radius: 4px 0 0 4px;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-ms-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}
#fixed-flag a span {
	font-size: 12px;
	color: #f26e20;
}
#fixed-flag a:after {
	content: "\f041";
	position: absolute;
	top: calc(50% - 20px);
	right: 16px;
	font-family: 'FontAwesome';
	font-size: 42px;
	color: #f26e20;
	line-height: 1;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-ms-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}

/* Fixed Flag - Expand on hover */
#fixed-flag a:hover {
    padding-right: 60px;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}

#fixed-flag a:hover:after {
    right: 26px;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}

/* Hide the flag on screens 980px or less */
@media only screen and (max-width: 980px) {
div#fixed-flag {
    display: none;
}
}