| /* FONT PATH
* -------------------------- */
@font-face {
font-family: ' Fontawesome ';
Src:url ('.. /fonts/fontawesome-webfont.eot?v=4.0.3 ');
Src:url ('.. /fonts/fontawesome-webfont.eot #iefix &v=4.0.3 ') format (' Embedded-opentype '), url (' ... /fonts/fontawesome-webfont.woff?v=4.0.3 ') format (' Woff '), url ('.. /fonts/fontawesome-webfont.ttf?v=4.0.3 ') format (' TrueType '), url ('.. /fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular ') format (' SVG ');
Font-weight:normal;
Font-style:normal;
}
. FA {
Display:inline-block;
Font-family:fontawesome;
Font-style:normal;
Font-weight:normal;
Line-height:1;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
/* makes the font 33% larger relative to the icon container * *
. fa-lg {
Font-size:1.3333333333333333em;
Line-height:0.75em;
Vertical-align:-15%;
}
. fa-2x {
Font-size:2em;
}
. fa-3x {
Font-size:3em;
}
. fa-4x {
Font-size:4em;
}
. fa-5x {
Font-size:5em;
}
. FA-FW {
Width:1.2857142857142858em;
Text-align:center;
}
. fa-ul {
padding-left:0;
Margin-left:2.142857142857143em;
List-style-type:none;
}
. Fa-ul > Li {
position:relative;
}
. fa-li {
Position:absolute;
Left: -2.142857142857143em;
Width:2.142857142857143em;
Top:0.14285714285714285em;
Text-align:center;
}
. fa-li.fa-lg {
Left: -1.8571428571428572em;
}
. fa-border {
padding:. 2em. 25em. 15em;
Border:solid 0.08em #eeeeee;
Border-radius:. 1em;
}
. pull-right {
Float:right;
}
. pull-left {
Float:left;
}
. fa.pull-left {
Margin-right:. 3em;
}
. fa.pull-right {
Margin-left:. 3em;
}
. fa-spin {
-webkit-animation:spin 2s infinite linear;
-moz-animation:spin 2s infinite linear;
-o-animation:spin 2s infinite linear;
Animation:spin 2s infinite linear;
}
@-moz-keyframes Spin {
0% {
-moz-transform:rotate (0DEG);
}
100% {
-moz-transform:rotate (359DEG);
}
}
@-webkit-keyframes Spin {
0% {
-webkit-transform:rotate (0DEG);
}
100% {
-webkit-transform:rotate (359DEG);
}
}
@-o-keyframes Spin {
0% {
-o-transform:rotate (0DEG);
}
100% {
-o-transform:rotate (359DEG);
}
}
@-ms-keyframes Spin {
0% {
-ms-transform:rotate (0DEG);
}
100% {
-ms-transform:rotate (359DEG);
}
}
@keyframes Spin {
0% {
Transform:rotate (0DEG);
}
100% {
Transform:rotate (359DEG);
}
}
. fa-rotate-90 {
Filter:progid:DXImageTransform.Microsoft.BasicImage (rotation=1);
-webkit-transform:rotate (90DEG);
-moz-transform:rotate (90DEG);
-ms-transform:rotate (90DEG);
-o-transform:rotate (90DEG);
Transform:rotate (90DEG);
}
. fa-rotate-180 {
Filter:progid:DXImageTransform.Microsoft.BasicImage (rotation=2);
-webkit-transform:rotate (180DEG);
-moz-transform:rotate (180DEG);
-ms-transform:rotate (180DEG);
-o-transform:rotate (180DEG);
Transform:rotate (180DEG);
}
. fa-rotate-270 {
Filter:progid:DXImageTransform.Microsoft.BasicImage (rotation=3);
-webkit-transform:rotate (270DEG);
-moz-transform:rotate (270DEG);
-ms-transform:rotate (270DEG);
-o-transform:rotate (270DEG);
Transform:rotate (270DEG);
}
. fa-flip-horizontal {
Filter:progid:DXImageTransform.Microsoft.BasicImage (rotation=0, mirror=1);
-webkit-transform:scale (-1, 1);
-moz-transform:scale (-1, 1);
-ms-transform:scale (-1, 1);
-o-transform:scale (-1, 1);
Transform:scale (-1, 1);
}
. fa-flip-vertical {
Filter:progid:DXImageTransform.Microsoft.BasicImage (rotation=2, mirror=1);
-webkit-transform:scale (1,-1);
-moz-transform:scale (1,-1);
-ms-transform:scale (1,-1);
-o-transform:scale (1,-1);
Transform:scale (1,-1);
}
. fa-stack {
position:relative;
Display:inline-block;
Width:2em;
Height:2em;
Line-height:2em;
Vertical-align:middle;
}
. fa-stack-1x,
. fa-stack-2x {
Position:absolute;
left:0;
width:100%;
Text-align:center;
}
. fa-stack-1x {
Line-height:inherit;
}
. fa-stack-2x {
Font-size:2em;
}
. fa-inverse {
Color: #ffffff;
}
/* Font Awesome uses the Unicode Private use Area (PUA) to ensure screen
Readers don't read off random characters that represent icons * *
. fa-glass:before {
Content: "f000";
}
. fa-music:before {
Content: "f001";
}
. fa-search:before {
Content: "f002";
}
. fa-envelope-o:before {
Content: "F003";
}
. fa-heart:before {
Content: "f004";
}
. fa-star:before {
Content: "f005";
}
. fa-star-o:before {
Content: "f006";
}
. fa-user:before {
Content: "f007";
}
. fa-film:before {
Content: "f008";
}
. fa-th-large:before {
Content: "f009";
}
. fa-th:before {
Content: "f00a";
}
. fa-th-list:before {
Content: "f00b";
}
. fa-check:before {
Content: "f00c";
}
. fa-times:before {
Content: "f00d";
}
. fa-search-plus:before {
Content: "f00e";
}
. fa-search-minus:before {
Content: "f010";
}
. fa-power-off:before {
Content: "f011";
}
. fa-signal:before {
Content: "f012";
}
. Fa-gear:before,
. fa-cog:before {
Content: "f013";
}
. fa-trash-o:before {
Content: "f014";
}
. fa-home:before {
Content: "F015";
}
. fa-file-o:before {
Content: "f016";
}
. fa-clock-o:before {
Content: "f017";
}
. fa-road:before {
Content: "f018";
}
. fa-download:before {
Content: "f019";
}
. fa-arrow-circle-o-down:before {
Content: "F01A";
}
. fa-arrow-circle-o-up:before {
Content: "f01b";
}
. fa-inbox:before {
Content: "f01c";
}
. fa-play-circle-o:before {
Content: "f01d";
}
. Fa-rotate-right:before,
. fa-repeat:before {
Content: "f01e";
}
. fa-refresh:before {
Content: "f021";
}
. fa-list-alt:before {
Content: "f022";
}
. fa-lock:before {
Content: "f023";
}
. fa-flag:before {
Content: "f024";
}
. fa-headphones:before {
Content: "f025";
}
. fa-volume-off:before {
Content: "f026";
}
. fa-volume-down:before {
Content: "f027";
}
. fa-volume-up:before {
Content: "f028";
}
. fa-qrcode:before {
Content: "f029";
}
. fa-barcode:before {
Content: "f02a";
}
. fa-tag:before {
Content: "f02b";
}
. fa-tags:before {
Content: "F02C";
}
. fa-book:before {
Content: "f02d";
}
. fa-bookmark:before {
Content: "f02e";
}
. fa-print:before {
Content: "f02f";
}
. fa-camera:before {
Content: "f030";
}
. fa-font:before {
Content: "f031";
}
. fa-bold:before {
Content: "f032";
}
. fa-italic:before {
Content: "f033";
}
. fa-text-height:before {
Content: "f034";
}
. fa-text-width:before {
Content: "f035";
}
. fa-align-left:before {
Content: "f036";
}
. fa-align-center:before {
Content: "f037";
}
. fa-align-right:before {
Content: "f038";
}
. fa-align-justify:before {
Content: "f039";
}
. fa-list:before {
Content: "f03a";
}
. Fa-dedent:before,
. fa-outdent:before {
Content: "f03b";
}
. fa-indent:before {
Content: "f03c";
}
. fa-video-camera:before {
Content: "f03d";
}
. fa-picture-o:before {
Content: "f03e";
}
. fa-pencil:before {
Content: "f040";
}
. fa-map-marker:before {
Content: "f041";
}
. fa-adjust:before {
Content: "f042";
}
. fa-tint:before {
Content: "f043";
}
. Fa-edit:before,
. fa-pencil-square-o:before {
Content: "f044";
}
. fa-share-square-o:before {
Content: "f045";
}
. fa-check-square-o:before {
Content: "f046";
}
. fa-arrows:before {
Content: "f047";
}
. fa-step-backward:before {
Content: "f048";
}
. fa-fast-backward:before {
Content: "f049";
}
. fa-backward:before {
Content: "f04a";
}
. fa-play:before {
Content: "f04b";
}
. fa-pause:before {
Content: "F04C";
}
. fa-stop:before {
Content: "F04D";
}
. fa-forward:before {
Content: "f04e";
}
. fa-fast-forward:before {
Content: "f050";
}
. fa-step-forward:before {
Content: "f051";
}
. fa-eject:before {
Content: "f052";
}
. fa-chevron-left:before {
Content: "f053";
}
. fa-chevron-right:before {
Content: "f054";
}
. fa-plus-circle:before {
Content: "f055";
}
. fa-minus-circle:before {
Content: "f056";
}
. fa-times-circle:before {
Content: "f057";
}
. fa-check-circle:before {
Content: "f058";
}
. fa-question-circle:before {
Content: "f059";
}
. fa-info-circle:before {
Content: "f05a";
}
. fa-crosshairs:before {
Content: "f05b";
}
. fa-times-circle-o:before {
Content: "f05c";
}
. fa-check-circle-o:before {
Content: "f05d";
}
. fa-ban:before {
Content: "f05e";
}
. fa-arrow-left:before {
Content: "f060";
}
. fa-arrow-right:before {
Content: "f061";
}
. fa-arrow-up:before {
Content: "f062";
}
. fa-arrow-down:before {
Content: "f063";
}
. Fa-mail-forward:before,
. fa-share:before {
Content: "f064";
}
. fa-expand:before {
Content: "f065";
}
. fa-compress:before {
Content: "f066";
}
. fa-plus:before {
Content: "f067";
}
. fa-minus:before {
Content: "f068";
}
. fa-asterisk:before {
Content: "f069";
}
. fa-exclamation-circle:before {
Content: "f06a";
}
. fa-gift:before {
Content: "f06b";
}
. fa-leaf:before {
Content: "F06C";
}
. fa-fire:before {
Content: "F06D";
}
. fa-eye:before {
Content: "f06e";
}
. fa-eye-slash:before {
Content: "f070";
}
. Fa-warning:before,
. fa-exclamation-triangle:before {
Content: "f071";
}
. fa-plane:before {
Content: "f072";
}
. fa-calendar:before {
Content: "f073";
}
. fa-random:before {
Content: "f074";
}
. fa-comment:before {
Content: "f075";
}
. fa-magnet:before {
Content: "f076";
}
. fa-chevron-up:before {
Content: "f077";
}
. fa-chevron-down:before {
Content: "f078";
}
. fa-retweet:before {
Content: "f079";
}
. fa-shopping-cart:before {
Content: "f07a";
}
. fa-folder:before {
Content: "f07b";
}
. fa-folder-open:before {
Content: "f07c";
}
. fa-arrows-v:before {
Content: "f07d";
}
. fa-arrows-h:before {
Content: "f07e";
}
. fa-bar-chart-o:before {
Content: "f080";
}
. fa-twitter-square:before {
Content: "f081";
}
. fa-facebook-square:before {
Content: "f082";
}
. fa-camera-retro:before {
Content: "f083";
}
. fa-key:before {
Content: "f084";
}
. Fa-gears:before,
. fa-cogs:before {
Content: "f085";
}
. fa-comments:before {
Content: "f086";
}
. fa-thumbs-o-up:before {
Content: "f087";
}
. fa-thumbs-o-down:before {
Content: "f088";
}
. fa-star-half:before {
Content: "f089";
}
. fa-heart-o:before {
Content: "f08a";
}
. fa-sign-out:before {
Content: "f08b";
}
. fa-linkedin-square:before {
Content: "f08c";
}
. fa-thumb-tack:before {
Content: "f08d";
}
. fa-external-link:before {
Content: "f08e";
}
. fa-sign-in:before {
Content: "f090";
}
. fa-trophy:before {
Content: "f091";
}
. fa-github-square:before {
Content: "f092";
}
. fa-upload:before {
Content: "f093";
}
. fa-lemon-o:before {
Content: "f094";
}
. fa-phone:before {
Content: "f095";
}
. fa-square-o:before {
Content: "f096";
}
. fa-bookmark-o:before {
Content: "f097";
}
. fa-phone-square:before {
Content: "f098";
}
. fa-twitter:before {
Content: "f099";
}
. fa-facebook:before {
Content: "F09A";
}
. fa-github:before {
Content: "f09b";
}
. fa-unlock:before {
Content: "f09c";
}
. fa-credit-card:before {
Content: "f09d";
}
. fa-rss:before {
Content: "f09e";
}
. fa-hdd-o:before {
Content: "F0A0";
}
. fa-bullhorn:before {
Content: "F0A1";
}
. fa-bell:before {
Content: "F0F3";
}
. fa-certificate:before {
Content: "F0A3";
}
. fa-hand-o-right:before {
Content: "F0A4";
}
. fa-hand-o-left:before {
Content: "F0a5";
}
. fa-hand-o-up:before {
Content: "F0a6";
}
. fa-hand-o-down:before {
Content: "F0a7";
}
. fa-arrow-circle-left:before {
Content: "F0a8";
}
. fa-arrow-circle-right:before {
Content: "F0A9";
}
. fa-arrow-circle-up:before {
Content: "F0AA";
}
. fa-arrow-circle-down:before {
Content: "F0ab";
}
. fa-globe:before {
Content: "F0AC";
}
. fa-wrench:before {
Content: "F0AD";
}
. fa-tasks:before {
Content: "F0ae";
}
. fa-filter:before {
Content: "F0b0";
}
. fa-briefcase:before {
Content: "F0B1";
}
. fa-arrows-alt:before {
Content: "F0B2";
}
. Fa-group:before,
. fa-users:before {
Content: "F0C0";
}
. Fa-chain:before,
. fa-link:before {
Content: "F0C1";
}
. fa-cloud:before {
Content: "F0C2";
}
. fa-flask:before {
Content: "F0C3";
}
. Fa-cut:before,
. fa-scissors:before {
Content: "F0C4";
}
. Fa-copy:before,
. fa-files-o:before {
Content: "F0C5";
}
. fa-paperclip:before {
Content: "F0c6";
}
. Fa-save:before,
. fa-floppy-o:before {
Content: "F0c7";
}
. fa-square:before {
Content: "F0c8";
}
. fa-bars:before {
Content: "F0C9";
}
. fa-list-ul:before {
Content: "F0CA";
}
. fa-list-ol:before {
Content: "F0CB";
}
. fa-strikethrough:before {
Content: "f0cc";
}
. fa-underline:before {
Content: "F0CD";
}
. fa-table:before {
Content: "F0CE";
}
. fa-magic:before {
Content: "F0d0";
}
. fa-truck:before {
Content: "F0d1";
}
. fa-pinterest:before {
Content: "F0d2";
}
. fa-pinterest-square:before {
Content: "F0d3";
}
. fa-google-plus-square:before {
Content: "F0d4";
}
. fa-google-plus:before {
Content: "F0d5";
}
. fa-money:before {
Content: "F0d6";
}
. fa-caret-down:before {
Content: "F0d7";
}
. fa-caret-up:before {
Content: "F0d8";
}
. fa-caret-left:before {
Content: "F0D9";
}
. fa-caret-right:before {
Content: "F0da";
}
. fa-columns:before {
Content: "f0db";
}
. Fa-unsorted:before,
. fa-sort:before {
Content: "F0DC";
}
. Fa-sort-down:before,
. fa-sort-asc:before {
Content: "F0DD";
}
. Fa-sort-up:before,
. fa-sort-desc:before {
Content: "F0DE";
}
. fa-envelope:before {
Content: "F0e0";
}
. fa-linkedin:before {
Content: "F0e1";
}
. Fa-rotate-left:before,
. fa-undo:before {
Content: "F0e2";
}
. Fa-legal:before,
. fa-gavel:before {
Content: "F0e3";
}
. Fa-dashboard:before,
. fa-tachometer:before {
Content: "F0e4";
}
. fa-comment-o:before {
Content: "F0e5";
}
. fa-comments-o:before {
Content: "F0e6";
}
. Fa-flash:before,
. fa-bolt:before {
Content: "F0e7";
}
. fa-sitemap:before {
Content: "F0e8";
}
. fa-umbrella:before {
Content: "F0e9";
}
. Fa-paste:before,
. fa-clipboard:before {
Content: "F0ea";
}
. fa-lightbulb-o:before {
Content: "F0eb";
}
. fa-exchange:before {
Content: "F0ec";
}
. fa-cloud-download:before {
Content: "F0ed";
}
. fa-cloud-upload:before {
Content: "F0ee";
}
. fa-user-md:before {
Content: "F0F0";
}
. fa-stethoscope:before {
Content: "F0F1";
}
. fa-suitcase:before {
Content: "F0f2";
}
. fa-bell-o:before {
Content: "F0A2";
}
. fa-coffee:before {
Content: "F0f4";
}
. fa-cutlery:before {
Content: "F0f5";
}
. fa-file-text-o:before {
Content: "F0f6";
}
. fa-building-o:before {
Content: "F0f7";
}
. fa-hospital-o:before {
Content: "F0f8";
}
. fa-ambulance:before {
Content: "F0f9";
}
. fa-medkit:before {
Content: "F0FA";
}
. fa-fighter-jet:before {
Content: "F0FB";
}
. fa-beer:before {
Content: "F0FC";
}
. fa-h-square:before {
Content: "F0FD";
}
. fa-plus-square:before {
Content: "F0fe";
}
. fa-angle-double-left:before {
Content: "F100";
}
. fa-angle-double-right:before {
Content: "F101";
}
. fa-angle-double-up:before {
Content: "f102";
}
. fa-angle-double-down:before {
Content: "f103";
}
. fa-angle-left:before {
Content: "f104";
}
. fa-angle-right:before {
Content: "F105";
}
. fa-angle-up:before {
Content: "f106";
}
. fa-angle-down:before {
Content: "f107";
}
. fa-desktop:before {
Content: "f108";
}
. fa-laptop:before {
Content: "f109";
}
. fa-tablet:before {
Content: "F10A";
}
. Fa-mobile-phone:before,
. fa-mobile:before {
Content: "F10B";
}
. fa-circle-o:before {
Content: "F10C";
}
. fa-quote-left:before {
Content: "f10d";
}
. fa-quote-right:before {
Content: "f10e";
}
. fa-spinner:before {
Content: "F110";
}
. fa-circle:before {
Content: "f111";
}
. Fa-mail-reply:before,
. fa-reply:before {
Content: "f112";
}
. fa-github-alt:before {
Content: "f113";
}
. fa-folder-o:before {
Content: "f114";
}
. fa-folder-open-o:before {
Content: "f115";
}
. fa-smile-o:before {
Content: "f118";
}
. fa-frown-o:before {
Content: "f119";
}
. fa-meh-o:before {
Content: "f11a";
}
. fa-gamepad:before {
Content: "F11B";
}
. fa-keyboard-o:before {
Content: "F11C";
}
. fa-flag-o:before {
Content: "f11d";
}
. fa-flag-checkered:before {
Content: "f11e";
}
. fa-terminal:before {
Content: "F120";
}
. fa-code:before {
Content: "f121";
}
. fa-reply-all:before {
Content: "f122";
}
. fa-mail-reply-all:before {
Content: "f122";
}
. Fa-star-half-empty:before,
. Fa-star-half-full:before,
. fa-star-half-o:before {
Content: "F123";
}
. fa-location-arrow:before {
Content: "f124";
}
. fa-crop:before {
Content: "f125";
}
. fa-code-fork:before {
Content: "f126";
}
. Fa-unlink:before,
. fa-chain-broken:before {
Content: "f127";
}
. fa-question:before {
Content: "f128";
}
. fa-info:before {
Content: "f129";
}
. fa-exclamation:before {
Content: "F12A";
}
. fa-superscript:before {
Content: "f12b";
}
. fa-subscript:before {
Content: "F12C";
}
. fa-eraser:before {
Content: "f12d";
}
. fa-puzzle-piece:before {
Content: "f12e";
}
. fa-microphone:before {
Content: "f130";
}
. fa-microphone-slash:before {
Content: "f131";
}
. fa-shield:before {
Content: "f132";
}
. fa-calendar-o:before {
Content: "f133";
}
. fa-fire-extinguisher:before {
Content: "f134";
}
. fa-rocket:before {
Content: "F135";
}
. fa-maxcdn:before {
Content: "f136";
}
. fa-chevron-circle-left:before {
Content: "f137";
}
. fa-chevron-circle-right:before {
Content: "f138";
}
. fa-chevron-circle-up:before {
Content: "f139";
}
. fa-chevron-circle-down:before {
Content: "F13A";
}
. fa-html5:before {
Content: "f13b";
}
. fa-css3:before {
Content: "f13c";
}
. fa-anchor:before {
Content: "f13d";
}
. fa-unlock-alt:before {
Content: "f13e";
}
. fa-bullseye:before {
Content: "f140";
}
. fa-ellipsis-h:before {
Content: "f141";
}
. fa-ellipsis-v:before {
Content: "f142";
}
. fa-rss-square:before {
Content: "f143";
}
. fa-play-circle:before {
Content: "f144";
}
. fa-ticket:before {
Content: "f145";
}
. fa-minus-square:before {
Content: "f146";
}
. fa-minus-square-o:before {
Content: "f147";
}
. fa-level-up:before {
Content: "f148";
}
. fa-level-down:before {
Content: "f149";
}
. fa-check-square:before {
Content: "f14a";
}
. fa-pencil-square:before {
Content: "f14b";
}
. fa-external-link-square:before {
Content: "f14c";
}
. fa-share-square:before {
Content: "f14d";
}
. fa-compass:before {
Content: "F14E";
}
. Fa-toggle-down:before,
. fa-caret-square-o-down:before {
Content: "F150";
}
. Fa-toggle-up:before,
. fa-caret-square-o-up:before {
Content: "f151";
}
. Fa-toggle-right:before,
. fa-caret-square-o-right:before {
Content: "f152";
}
. Fa-euro:before,
. fa-eur:before {
Content: "f153";
}
. fa-gbp:before {
Content: "f154";
}
. Fa-dollar:before,
. fa-usd:before {
Content: "f155";
}
. Fa-rupee:before,
. fa-inr:before {
Content: "f156";
}
. Fa-cny:before,
. Fa-rmb:before,
. Fa-yen:before,
. fa-jpy:before {
Content: "f157";
}
. Fa-ruble:before,
. Fa-rouble:before,
. fa-rub:before {
Content: "f158";
}
. Fa-won:before,
. fa-krw:before {
Content: "f159";
}
. Fa-bitcoin:before,
. fa-btc:before {
Content: "F15A";
}
. fa-file:before {
Content: "f15b";
}
. fa-file-text:before {
Content: "f15c";
}
. fa-sort-alpha-asc:before {
Content: "F15d";
}
. fa-sort-alpha-desc:before {
Content: "F15E";
}
. fa-sort-amount-asc:before {
Content: "f160";
}
. fa-sort-amount-desc:before {
Content: "f161";
}
. fa-sort-numeric-asc:before {
Content: "f162";
}
. fa-sort-numeric-desc:before {
Content: "f163";
}
. fa-thumbs-up:before {
Content: "f164";
}
. fa-thumbs-down:before {
Content: "f165";
}
. fa-youtube-square:before {
Content: "f166";
}
. fa-youtube:before {
Content: "f167";
}
. fa-xing:before {
Content: "f168";
}
. fa-xing-square:before {
Content: "f169";
}
. fa-youtube-play:before {
Content: "F16A";
}
. fa-dropbox:before {
Content: "f16b";
}
. fa-stack-overflow:before {
Content: "f16c";
}
. fa-instagram:before {
Content: "f16d";
}
. fa-flickr:before {
Content: "f16e";
}
. fa-adn:before {
Content: "f170";
}
. fa-bitbucket:before {
Content: "f171";
}
. fa-bitbucket-square:before {
Content: "f172";
}
. fa-tumblr:before {
Content: "f173";
}
. fa-tumblr-square:before {
Content: "f174";
}
. fa-long-arrow-down:before {
Content: "f175";
}
. fa-long-arrow-up:before {
Content: "f176";
}
. fa-long-arrow-left:before {
Content: "f177";
}
. fa-long-arrow-right:before {
Content: "f178";
}
. fa-apple:before {
Content: "f179";
}
. fa-windows:before {
Content: "f17a";
}
. fa-android:before {
Content: "f17b";
}
. fa-linux:before {
Content: "f17c";
}
. fa-dribbble:before {
Content: "f17d";
}
. fa-skype:before {
Content: "f17e";
}
. fa-foursquare:before {
Content: "f180";
}
. fa-trello:before {
Content: "f181";
}
. fa-female:before {
Content: "f182";
}
. fa-male:before {
Content: "f183";
}
. fa-gittip:before {
Content: "f184";
}
. fa-sun-o:before {
Content: "f185";
}
. fa-moon-o:before {
Content: "f186";
}
. fa-archive:before {
Content: "f187";
}
. fa-bug:before {
Content: "f188";
}
. fa-vk:before {
Content: "f189";
}
. fa-weibo:before {
Content: "f18a";
}
. fa-renren:before {
Content: "f18b";
}
. fa-pagelines:before {
Content: "f18c";
}
. fa-stack-exchange:before {
Content: "f18d";
}
. fa-arrow-circle-o-right:before {
Content: "f18e";
}
. fa-arrow-circle-o-left:before {
Content: "f190";
}
. Fa-toggle-left:before,
. fa-caret-square-o-left:before {
Content: "f191";
}
. fa-dot-circle-o:before {
Content: "f192";
}
. fa-wheelchair:before {
Content: "f193";
}
. fa-vimeo-square:before {
Content: "f194";
}
. Fa-turkish-lira:before,
. fa-try:before {
Content: "f195";
}
. fa-plus-square-o:before {
Content: "f196";
}
CSS file
Body {
Background: #ccc;
Background-repeat:repeat;
Text-align:center;
Display:block;
Font-family:sans-serif;
} *{
margin:0;padding:0;
Box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-transition:all 0.3s ease-in;
-moz-transition:all 0.3s ease-in;
Transition:all 0.3s ease-in;
}
. title H1 {
Position:absolute;
Top: -100px;
Text-align:center;
font-size:12px;
}
. title H2 {
Position:absolute;
Top: -200px;
Text-align:center;
font-size:8px;
}
Header {
width:62%;
height:80px;
Background:rgba (0, 255, 0, 0.3);
margin-top:25px;
}
. contact_details {
Display:block;
Float:right;
width:60%;
Background:rgba (0, 0, 0, 0.2);
padding:10px 2% 10px 0;
margin-top:40px;
}
. bcard {
Border:solid 1px #999;
border-bottom:2px solid #999;
Background:rgba (255, 255, 255, 0.5);
Margin-top: -110px;
Position:absolute;
Display:inline-block;
width:400px;
height:220px;
top:50%;
Margin-left: -200px;
-webkit-box-shadow:3px 3px 3px 3px rgba (0, 0, 0, 0.3);
box-shadow:3px 3px 3px 3px rgba (0, 0, 0, 0.3);
border-top:0;
Overflow:hidden;
}
. bcard:hover > Header {
margin-left:-260px;
}
. bcard:hover > Contact_details {
margin-right:-260px;
}
. bcard:hover > Footer {
top:150px;
}
. bcard:hover > Footer a {
font-size:36px;
}
. bcard:hover > Title H1 {
top:24px;
font-size:24px;
}
. bcard:hover > Title H2 {
top:66px;
font-size:14px;
}
H1, H2 {
Float:left;
width:90%;
Text-align:left;
margin:15px 5% 0 5%;
font-size:24px;
font-weight:400;
Color: #333;
text-shadow:1px 1px 1px #FFFFFF;
}
H2 {
font-size:14px;
margin-top:3px;
Color: #444;
}
. border-top {
Float:left;
Border-top:solid 3px;
margin:0;
}
. gray1 {
Border-color: #f00;
width:15%;
}
. gray2 {
Border-color: #0f9;
width:23%;
}
. gray3 {
Border-color: #000;
width:62%;
}
p {
Text-align:right;
margin:0;
font-weight:100;
Color: #444;
font-size:13px;
text-shadow:1px 1px 1px #FFFFFF;
}
. Mail {
margin-top:0;
}
A
Text-decoration:none;
text-shadow:1px 1px 1px #FFFFFF;
Color: #444;
}
Footer {
Position:absolute;
width:80%;
Text-align:center;
Margin:0 10%;
Display:block;
top:250px;
}
Footer a {
bottom:0;
margin:0 Auto;
Float:left;
Text-align:center;
Display:block;
font-size:10px;
width:20%;
}
. fa-google-plus-square:hover {
Color: #D34836;
}
. fa-linkedin-square:hover {
Color: #007BB6;
}
. fa-twitter-square:hover {
Color: #4099FF;
}
. fa-facebook-square:hover {
Color: #3B5998;
}
. fa-envelope:hover {
Color: #000;
} HTML code
<div class= "Bcard"
<div class= "Border-top gray1" ></DIV>
<div class= " Border-top gray2 "></div>
<div class=" Border-top gray3 "></DIV>
<div class=" title ">
</div>
</ Header>
<div class= "contact_details"
<p>
187xxxxxxxx
</p>
<p class= "Mail"
<a href= "mailto:admin@yongyuan.us" >ADMIN@YONGYUAN.US</A>
</p> </div>
<footer>
<a href= "><i class= fa fa-google-plus-square" ></i> </a>
<a href= "" ><i class= "fa fa-twitter-square" ></I></A>
<a href= "" title= "Follow me on Facebook" ><i class= "fa fa-facebook-square" ></I></A>
<a href= "" title= "View my LinkedIn profile" ><i class= "fa fa-linkedin-square" ></I></A>
<a href= "" title= "Send me an e-mail" ><i class= "fa fa-envelope" ></I></A>
</footer>
</div> |
