#cordialhype .HYPE_document { min-height: 193px;} /*.HYPE_document, */ #indexcordial_hype_container { position: relative; min-width: 100% !important; width: 100%; height: 100%; display: block; } /* hype above _______________________ */ /* @group bootstrap responsive video */ .embed-responsive { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; } .embed-responsive::before { display: block; content: ""; } .embed-responsive .embed-responsive-item, .embed-responsive iframe, .embed-responsive embed, .embed-responsive object, .embed-responsive video { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; } .embed-responsive-21by9::before { padding-top: 42.857143%; } .embed-responsive-16by9::before { padding-top: 56.25%; } .embed-responsive-3by4::before { padding-top: 133.333333%; } .embed-responsive-1by1::before { padding-top: 100%; } /* @end */ .center, .center img {margin-left: auto; margin-right: auto; display: block;text-align: center; } /*.center, .center img {margin-left: auto!important; margin-right: auto!important; display: block; text-align: center !important; }*/ /* @group columns 2x */ /* code:
Text 1
Text 2
__________________ */ .left-side { float: left; width: 48%; } .right-side { float: right; width: 48%; } .column-2x-500 img, .column-2x-600 img, .column-2x-770 img, .column-2x-900 img, .column-2x-1030 img, .column-2x-1150 img { max-width: 100%; height: auto; } .column-2x-500:after, .column-2x-600:after, .column-2x-770:after, .column-2x-900:after, .column-2x-1030:after, .column-2x-1150:after { content:"";display: table; clear: both; } /* breakpoint 500px */ @media screen and (max-width: 500px) { .column-2x-500 .left-side, .column-2x-500 .right-side { float: none !important; width: auto !important; }} /* breakpoint 600px */ @media screen and (max-width: 600px) { .column-2x-600 .left-side, .column-2x-600 .right-side { float: none !important; width: auto !important; }} /* breakpoint 700px */ @media screen and (max-width: 770px) { .column-2x-770 .left-side, .column-2x-770 .right-side { float: none !important; width: auto !important; }} /* breakpoint 900px */ @media screen and (max-width: 900px) { .column-2x-900 .left-side, .column-2x-900 .right-side { float: none !important; width: auto !important; }} /* breakpoint 1030px */ @media screen and (max-width: 1030px) { .column-2x-1030 .left-side, .column-2x-1030 .right-side { float: none; width: auto; background-color: rgba(8, 8, 8, 0.82); } } /* breakpoint 1150x */ @media screen and (max-width: 1150px) { .column-2x-1150 .left-side, .column-2x-1150 .right-side { float: none; width: auto; } } /* @end */ /* ------- multithemes -------- */ /* @group Extracontent formatting */ .column { float: left; } .one { width: 100%; } .two { width: 50%;} #extraContainer1_back .two {} .three { width: 33.3%; } .four { width: 25%; } .five { width: 20%; } .two3rds { width: 66%; } .three4ths { width: 75%; } .four5ths { width: 80%; } .column .content { width: 90% ! important; margin: 0 auto; padding: 0 ! important; float: none ! important;} /* @end */ /* @group Extracontents */ #extraContainer1 { position: relative; overflow: auto; /* prevent fickering on DOM load CSS3 */ margin: auto; } #extraContainer1box { padding: 0; width: auto; position: relative; margin-right: auto; margin-left: auto; } #extraContainer1 img { display: block; overflow: auto; } #extraContainer2 { margin-right: auto; margin-left: auto; overflow: auto; position: relative; padding-right: 25px; padding-left: 25px; } #extraContainer2box { overflow: visible; padding: 0; margin-right: auto; margin-left: auto; width: auto; margin-top: 0; position: relative; } /* @end */ /* @group General Styles */ html{ height:100% ; min-height:100%; } body{ min-height:100%; padding: 0; margin: 0; } p { } b, strong { } a:link, a:visited { text-decoration: none; transition-property: color; transition-duration: 250ms; -webkit-transition-property: color; -webkit-transition-duration: 250ms; -moz-transition-property: color; -moz-transition-duration: 250ms; } a:hover, a:active { } img { border: none; } .image-left { float: left; margin: 5px 10px 2px 0; padding: 5px 5px 2px; position: relative; } .image-right { float: right; margin: 3px 0 2px 10px; padding: 3px 0 2px 4px; position: relative; } /* @end */ /* @group Layout */ #bodybanner{ height: 100%; width: 100%; position: fixed; top: 0; right: 0; left: 0; bottom: 0; pointer-events: none; -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; } #headerbannerpic { height: 100%; width: 100%; position: absolute; top: 0; right: 0; left: 0; bottom: 0; pointer-events: none; } #headerbannerbox { width: 100%; height: 100%; position: relative; padding-bottom: 0; margin-bottom: 0; } #container { position: relative; padding-bottom: 40px; -webkit-font-smoothing: antialiased; -webkit-backface-visibility: hidden; } .clearer {clear: both; display:block; position: relative;} #pageHeader { margin: 0 auto; padding: 0 15px; position: relative; max-width: 1000px !important; overflow: hidden !important; /* prevent horizontal scale hype - small devices */ } .dist { padding-top: 65px;} #logo img { max-height:100px; max-width:300px !important; height: auto; overflow: auto; width: auto; position: relative; display: block; top: 15px; } /* fixed issue in RW7 AW in logo DIV */ #logo [class^="fa fa-"],#logo [class*="fa fa-"] {display: none !important;} #logo {font-size: 0; line-height: 0; max-width:300px !important; } /* fixed issue in RW7 AW in logo DIV */ /* ------------- */ #contentContainer { top: 0; position: relative; margin-bottom: 0; } #contentContainer #content { margin-right: auto; margin-left: auto; padding: 43px 25px 25px; } #sidebarContainer { margin: 0; padding: 0; } #sidebarContainer #sidebar { margin-right: auto; margin-left: auto; padding-right: 25px; padding-left: 25px; } #sidebarContainer .sideHeader { text-align: center; padding-bottom: 15px; } #footer_main_box { padding: 0; margin: 0; min-height: 65px;} #footer_box { padding: 0; margin: 0; overflow: auto; text-transform: uppercase; } #footer { margin: 0; padding: 20px 0 5px 24px; float: left; } #footer p { text-align: center; margin-top: 0; padding: 4px 9px 5px 15px; } #footer a:link, #footer a:visited { } #footer a:hover, #footer a:active { } /* @end */ /* @group Bread-crumb */ #breadcrumbcontainer { text-align: center; padding: 17px 20px 6px 0; margin: 0 auto; float: right;} #breadcrumbcontainer ul { margin: 0; padding: 0;} #breadcrumbcontainer li { display: inline; position: relative; } #breadcrumbcontainer li:before { font-size: 13px; content: "/"; position: absolute; top: -3px; margin-left: -2px; line-height: 28px !important; font-weight: bold; font-family: "Arial", Lucida, Verdana, sans-serif;} #breadcrumbcontainer li:first-child:before { font-size: 13px; padding-right: 0; content: ""; position: absolute; top: -4px; margin-left: -3px; line-height: 28px !important; font-weight: bold; font-family: "PerspectiveSansRegular", Lucida, Verdana, sans-serif; } #breadcrumbcontainer a { text-decoration: none; transition: All 0.15s linear; -webkit-transition: All 0.15s linear; -moz-transition: All 0.15s linear; position: relative; font: 12px "Lucida Grande", Lucida, Verdana, sans-serif !important; line-height: 13px !important; padding-right: 0; padding-left: 9px; letter-spacing: 1px; } #breadcrumbcontainer a:hover { } /* @end */ /* @group --- Open Closed - ex3 */ #extraContainer3box { margin-left: auto; position: relative; display: none; padding: 0; margin-right: auto; z-index: 5; margin: 0; } #extraContainer3 { position: relative; text-align: left; padding-left: 25px; padding-right: 25px; -webkit-transform-style: preserve-3d; overflow: auto; } /* prevent fickering on DOM load CSS3 */ #extraContainer3 a:link, #extraContainer3 a:visited { text-decoration: none; transition-property: color; transition-duration: 250ms; -webkit-transition-property: color; -webkit-transition-duration: 250ms; -moz-transition-property: color; -moz-transition-duration: 250ms; } #extraContainer3 .boxOpened { } #extraContainer3 img {display: block;} /* ______________ */ #drop:hover { } #drop { margin: 0; z-index: 11 !important; cursor: pointer; width: auto; padding: 0; height: auto; white-space: nowrap; -webkit-animation: dropfade 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both !important; animation: dropfade 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both !important; -webkit-animation-delay: 1.9s !important; animation-delay: 1.9s !important; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes dropfade { 0%{ opacity:0;} 100%{ opacity:1;} } @-webkit-keyframes dropfade { 0%{ opacity:0;} 100%{ opacity:1;} } #drop:active:before, #drop.boxopened:active:before { } #drop:hover:before { -webkit-transform: translateZ(0px); } #drop:active:after, #drop.boxopened:active:after {} #drop.boxopened:active, #drop:active { } #drop.boxopened{ } #drop.boxopened .opened:before{ } /* ---------- below */ /* @group TEXT button */ /* edit this code */ #drop.boxopened:after {content:"CLOSE";} #drop:after {content:"OPEN";} /* edit this code */ #drop.boxopened:after, #drop:after { width: auto; display: block; font: 14px/1.2em "PerspectiveSansRegular", Lucida, Verdana, sans-serif; text-align: left; overflow: visible; padding: 10px 18px 9px; transition: all 0.15s linear; -moz-transition: all 0.15s linear; -webkit-transition: all 0.15s linear; letter-spacing: 1px; opacity: 0.95; text-align: center !important; margin-top: -40px; margin-bottom: 3px; } #drop:active:after, #drop.boxopened:active:after { letter-spacing: 2px;} /* @end */ #boxOpened { top: 0px !important; } /* -----on off */ /* @end */ /* @group Desktop Toolbar */ /* Toolbar Styles */ #topnav { margin: 0 auto; width: auto; padding-top: 10px; padding-bottom: 10px; box-shadow: 0 1px 3px rgba(23, 23, 23, 0.27); -webkit-box-shadow: 0 1px 3px rgba(23, 23, 23, 0.27); -moz-box-shadow: 0 1px 3px rgba(23, 23, 23, 0.27); z-index: 503; position: fixed; top: 0; right: 0; left: 0; } /* -----transform */ .f-navcontainer { position: fixed; top: 0; right: 0; left: 0; } .f-navcontainer #navcontainer ul ul a { padding-top: 0; padding-bottom: 0;} .f-navcontainer#topnav, .f-navcontainer #navcontainer ul a { transition: all 0.2s linear !important; -moz-transition: all 0.2s linear !important; -webkit-transition: all 0.2s linear !important; } /* end */ #navcontainer { height: 50px; margin: 0; text-align: left !important; transition: all 0s linear !important; -moz-transition: all 0s linear !important; -webkit-transition: all 0s linear !important;} #navcontainer ul #current, #navcontainer .currentAncestor { } /* Parent - Level 0 */ /* ~ ~ ~ ~ ~ */ #navcontainer ul ul:before, #navcontainer ul ul:after { display: none;} /* ~ ~ ~ ~ ~ */ /* fix submenu eight */ #navcontainer ul { margin: 0; padding: 0; position: relative; } #navcontainer li { display: inline-block; position: relative; } #navcontainer li:hover { } #navcontainer ul a { font-weight: normal; font-style: normal; text-decoration: none; padding: 9px 18px; margin-right: 5px; } #navcontainer ul a [class^="fa fa-"], #navcontainer ul a [class*="fa fa-"] { padding-left: 0; padding-right: 0; margin-right: 0; margin-left: 0; letter-spacing: 0; } #navcontainer ul ul a [class^="fa fa-"], #navcontainer ul ul a [class*="fa fa-"] { padding-left: 0; padding-right: 2px; margin-right: 0; margin-left: 0; } #navcontainer>ul>li:last-child>a { } /* Child - Level 1 */ #navcontainer .parent { } #navcontainer ul .parent:after { content: "\e04c"; width: 10px; top: 20px; left: 5px; height: 10px; position: absolute; text-align: center; opacity: 0.35; overflow: hidden; font: 8px 'ElegantIcons'; } #navcontainer ul ul .parent:after { top: 11px; left: -15px; } /* 1 */ #navcontainer ul ul a { min-width: 150px; } #navcontainer ul ul { z-index: 200; position: absolute; left: 0; visibility: hidden; top: 48px; margin: 0; text-align: left; padding: 10px 2px 8px 22px; box-shadow: 0 1px 3px rgba(35, 35, 35, 0.15); -webkit-box-shadow: 0 1px 3px rgba(35, 35, 35, 0.15); -moz-box-shadow: 0 1px 3px rgba(35, 35, 35, 0.15); -webkit-backface-visibility: hidden; /*-webkit-transform:translate3d(0,0,0);*/ } /* ----- */ #navcontainer li:hover > ul { visibility: visible; } #navcontainer ul ul a { white-space: nowrap; display: block; height: 35px; text-align: left; padding: 0; margin-right: 0; } #navcontainer ul ul .currentAncestor { } #navcontainer ul ul .current{ } /* Child - Level 2 */ #navcontainer ul ul ul { position: absolute; top: 30px; white-space: nowrap; left: 3px; } /* @end */ #hello{ } /* @group Toolbar - devices - RESPONSIVE */ /* @group TEXT */ #nav_button:after, #nav_button.opened:after { position: relative; width: auto; cursor: default; display: block; cursor: default; font: 14px/1.1em "PerspectiveSansRegular", Lucida, Verdana, sans-serif; text-align: right; overflow: visible; white-space: nowrap; padding: 6px; letter-spacing: 1px; opacity: 0.8; transition: All 0.15s linear; -webkit-transition: All 0.15s linear; -moz-transition: All 0.15s linear; } #nav_button.opened:hover:after { letter-spacing: 2px; } /* edit this code */ #nav_button.opened:after { content:"CLOSE";} #nav_button:after {content:"MENU";} /* edit this code */ /* @end */ #menuOpened { top: 0px !important; } #nav_button { display: none; margin: 0; position: absolute; top: 0; height: auto; cursor: pointer; right: 0; z-index: 508; overflow: auto; width: auto; padding: 8px 10px 9px; text-align: center !important; transition: All 0.25s linear; -webkit-transition: All 0.25s linear; -moz-transition: All 0.25s linear; } #nav_button.opened { position: absolute; } #nav_button:hover:before { -webkit-transform: translateZ(0px); } /* -webkit-transform-style: preserve-3d; */ #navcontainer2 { display: none; overflow: auto; height: auto; overflow: auto; position: absolute; top: 0; z-index: 507; padding: 158px 4% 4%; margin: 0; width: 52%; right: 0; float: right; } #navcontainer2 .opened { } #navcontainer2 ul { margin: 0px 0px 10px; padding: 0px; } #navcontainer2 ul li { -webkit-transform: translateZ(0px); -webkit-transform-style: preserve-3d; -webkit-animation: scale-menu-items 0.33s ease-out both !important; animation: scale-menu-items 0.33s ease-out both !important; -webkit-animation-delay: 0.10s !important; animation-delay: 0.10s !important; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; } @keyframes scale-menu-items { 0% { margin-left: 2px; } 100% { margin-left: 0px;} } @-webkit-keyframes scale-menu-items { 0% { margin-left: 2px; } 100% { margin-left: 0px;} } #navcontainer2 li { display: block; } #navcontainer2 li:hover > ul { visibility: visible; } #navcontainer2>ul>li:first-child>a { border-top-style: hidden; margin-top: -99px; } #navcontainer2 a { text-align: left; position: relative; margin-top: 0; padding-top: 7px; padding-bottom: 7px; padding-left: 20px; display: block; float: none; letter-spacing: 1px; transition: All 0.15s linear; -webkit-transition: All 0.15s linear; -moz-transition: All 0.15s linear; border-top-style: none; border-top-width: 1px; margin-bottom: 10px; } #navcontainer2 a:hover { text-shadow: none; background-position: -10px; } /* ------PARENT first menu explorable + hover */ /*#navcontainer2 ul ul a:after { display: none; }*/ #navcontainer2 ul ul { overflow: auto; } #navcontainer2 ul ul li { } #navcontainer2 ul ul a { float: left; width: auto; height: auto; padding-top: 0; padding-right: 5px; padding-bottom: 0; clear: right; display: inline-block; } /* xxx */ #navcontainer2 ul ul ul { float: left; clear: right; padding-left: 7px; } #navcontainer2 ul ul ul ul {padding-left: 14px; margin-bottom: 0;} #navcontainer2 ul ul ul ul ul {padding-left: 21px; } /* @group font responsive */ #navcontainer2 ul a, #navcontainer2, #navcontainer2 a { font-size: 18px !important; line-height: 35px !important; } #navcontainer2 ul ul a, #navcontainer2 ul ul a { font-size: 14px !important; line-height: 24px !important; } /* @end */ /* @end */ /* @group Global Classes */ code { padding: 5px; margin-left: 6%; display: block; margin-right: 6%; font: 14px 'Courier New', Courier, monospace; border-width: 1px; border-style: solid; border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; border-left-width: 1px; border-right-width: 1px; overflow: auto; background-color: transparent; } pre, xmp { padding: 5px; display: block; font: 13px/15px 'Courier New', Courier, monospace; border-width: 1px; border-style: solid; overflow: auto; border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; border-left-width: 1px; border-right-width: 1px; background-color: transparent; letter-spacing: -1px; margin: 3px 0; } blockquote, .standout { } .imageStyle { } /* Main content area unordered list styles */ #contentContainer #content ul { } #contentContainer #content li { } ul.disc { list-style-type: disc; } ul.circle { list-style-type: circle; } ul.square { list-style-type: square; } ol.arabic-numbers { list-style-type: decimal; } ol.upper-alpha { list-style-type: upper-latin; } ol.lower-alpha { list-style-type: upper-latin; } ol.upper-roman { list-style-type: upper-roman; } ol.lower-roman { list-style-type: lower-roman; } /* Sidebar area unordered list styles */ #sidebarContainer #sidebar ul { } #sidebarContainer #sidebar li { } /* Table Styles */ table { } /* @end */ /* @group blog */ .blog_top { display: none; } .blog_bottom { display: block; overflow: auto; } /* @group Tag Cloud */ ul.blog-tag-cloud { margin: 0 0 10px; padding: 0; text-align: justify; } ul.blog-tag-cloud li { display: inline; padding-right: 5px; } .blog-tag-size-1 { font-size: 0.8em; } .blog-tag-size-2 { font-size: 0.85em; } .blog-tag-size-3 { font-size: 0.9em; } .blog-tag-size-4 { font-size: 0.95em; } .blog-tag-size-5 { font-size: 1em; } .blog-tag-size-6 { font-size: 1.05em; } .blog-tag-size-7 { font-size: 1.1em; } .blog-tag-size-8 { font-size: 1.15em; } .blog-tag-size-9 { font-size: 1.2em; } .blog-tag-size-10 { font-size: 1.25em; } .blog-tag-size-11 { font-size: 1.3em; } .blog-tag-size-12 { font-size: 1.35em; } .blog-tag-size-13 { font-size: 1.4em; } .blog-tag-size-14 { font-size: 1.45em; } .blog-tag-size-15 { font-size: 1.5em; } .blog-tag-size-16 { font-size: 1.55em; } .blog-tag-size-17 { font-size: 1.6em; } .blog-tag-size-18 { font-size: 1.65em; } .blog-tag-size-19 { font-size: 1.7em; } .blog-tag-size-20 { font-size: 1.75em; } /* @end */ /* @group Archive Page */ .blog-archive-background { text-decoration: none; } .blog-entry-summary { margin-bottom: 15px; padding: 6px; } .blog-archive-headings-wrapper { text-align: left; text-decoration: none; margin-right: auto; margin-left: auto; } .blog-archive-entries-wrapper { text-align: left; text-decoration: none; margin-right: auto; margin-left: auto; padding: 1px; } .blog-archive-entries-wrapper .blog-entry { } .blog-archive-month { font-size: 30px; text-align: left; text-indent: 40px; line-height: 30px; padding: 2px; margin: 0 0 10px; } .blog-archive-link { font-size: 13px; text-align: left; text-indent: 41px; margin-bottom: 22px; } .blog-archive-link:before, .blog-archive-month:before { top: 0; content: "\e022"; position: relative; padding: 0; margin: 0; font: 20px 'ElegantIcons'; left: -5px; } /* ------------ */ .blog-archive-link-enabled { } .blog-archive-link-disabled { } .blog-archive-link-enabled a:hover, .blog-archive-link-disabled a:hover { } .blog-archive-link a:link, .blog-archive-link a:visited { text-decoration: underline; } /* @end */ .blog-entry {text-align: left;} .blog-entry-title { display: block; margin-left: 0; margin-top: 50px; margin-bottom: 8px; text-indent: 3px; position: relative; padding: 0; width: auto; line-height: 1.4em; } .blog-entry-title a { padding: 10px;} .blog-entry-date { text-align: left; font-size: 12px; width: 94%; margin-bottom: 15px; padding: 5px 10px 5px 1px; } .blog-entry-date:before { top: 0; content: "\e023"; position: relative; padding: 0 0 0 10px; margin: 0; font: 10px 'ElegantIcons'; left: -5px; } /*styles the category link in the main entry */ .blog-entry-category { margin-left: 5px; margin-right: 2px; text-align: right; padding: 1px 10px 3px 5px; display: inline-block; } .blog-entry-category:before { top: 0; content: "\e022"; position: relative; padding: 0; margin: 0; font: 11px 'ElegantIcons'; left: -2px; } .blog-entry-category a:link, .blog-entry-category a:visited { } /*styles the permalink link in the main entry */ .blog-entry-permalink { padding-left: 15px; margin-left: 4px; padding-bottom: 5px; padding-top: 1px; } .blog-entry-permalink:before { top: 0; content: "\e046"; position: relative; padding: 0; margin: 0; font: 10px 'ElegantIcons'; left: -5px; } .blog-entry-permalink a:link, .blog-entry-permalink a:visited { } .blog-read-more { padding: 7px; margin: 0; } .blog-entry-body { padding: 0 0 15px; margin: 0; } .blog-entry-comments { text-align: left; padding-right: 5px; margin-bottom: 15px; margin-top: 10px; font-size: 11px; } /* styles the archives in the blog sidebar */ /* ---box vertical tile------------------------------- */ #blog-archives { } .blog-archive-link-enabled { } .blog-archive-link-disabled { } /* ---box top------------------------------------- */ #blog-categories { } .blog-category-link-enabled:before, .blog-category-link-disabled:before { top: 0; content: "5"; position: relative; padding: 0; font: 13px 'ElegantIcons'; margin-right: 0; margin-top: 0; margin-bottom: 0; left: -5px; } .blog-category-link-enabled, .blog-category-link-disabled { font-size: 13px; padding-bottom: 2px; line-height: 25px; text-transform: uppercase; transition: all 0.20s linear; -moz-transition: all 0.20s linear; -webkit-transition: all 0.20s linear; padding-top: 1px; padding-left: 15px; } .blog-category-link-disabled { position: relative; z-index: 1; } /* Styles the blog RSS feeds in the blog sidebar */ #blog-rss-feeds { font-size: 12px; line-height: 24px; padding-top: 7px; margin: 0; width: 90%; } .blog-rss-link { padding-bottom: 4px; float: left; clear: left; margin-top: 10px; margin-left: 2%; padding-left: 3%; text-indent: 4px; margin-bottom: 15px; width: 90%; } .blog-comments-rss-link { padding-bottom: 4px; float: left; clear: left; margin-top: 10px; margin-left: 2%; padding-left: 3%; text-indent: 4px; width: 90%; } .blog-comments-rss-link:before, .blog-rss-link:before { top: 0; content: "\e0bf"; position: relative; padding: 0; margin: 0; font: 22px 'ElegantIcons'; left: -5px; } p.blog-entry-tags { margin-bottom: 5px; } p.blog-entry-tags a { padding: 3px 1px 4px 20px; margin-left: 2px; } /* Styles blog tag links normal and visited state */ p.blog-entry-tags a:link, p.blog-entry-tags a:visited { padding-top: 2px; padding-bottom: 1px; margin: 0; } p.blog-entry-tags a:before, ul.blog-tag-cloud:before { top: 0; content: "\e017"; position: relative; padding: 0; margin: 0; font: 14px/21px 'ElegantIcons'; left: -5px; } /* Styles blog tag links hover state */ p.blog-entry-tags a:hover { } /* Styles blog tag links active state */ p.blog-entry-tags a:active { } /* Styles the tag clous un-ordered list */ /* ---box bottom------------------------------------- */ ul.blog-tag-cloud { } /* Styles tag cloud list item */ ul.blog-tag-cloud li { } /* Styles all links in the tag cloud in normal and visited state */ ul.blog-tag-cloud li a:link, ul.blog-tag-cloud li a:visited { } /* Styles all links in the tag cloud in hover state */ ul.blog-tag-cloud li a:hover { } /* Styles all links in the tag cloud in active state */ ul.blog-tag-cloud li a:active { } /* ___________________________ */ #blog-archives { padding: 10px; margin-top: 0; margin-left: 2%; line-height: 20px; float: left; width: 27.5%; border-bottom-style: solid; border-bottom-width: 2px; border-top-width: 2px; border-top-style: solid; margin-bottom: 15px; } #blog-categories { margin-top: 0; margin-left: 2%; padding: 12px 8px; float: left; width: 27.5%; border-bottom-style: solid; border-bottom-width: 2px; border-top-width: 2px; border-top-style: solid; margin-bottom: 15px; } ul.blog-tag-cloud { padding: 10px; margin-top: 0; margin-left: 2%; float: left; width: 27.5%; border-bottom-style: solid; border-bottom-width: 2px; border-top-width: 2px; border-top-style: solid; margin-bottom: 15px; } /* ___________________________ */ /* @end */ /* @group file sharing */ .filesharing-description { padding: 16px 20px 20px 16px; } .filesharing-item { float: left; display: table-row-group; padding: 0; margin: 2.6% 2.2% 2.6% 3%; width: 44.3%; } .filesharing-item-title { padding-top: 0; padding: 3%; width: auto; } .filesharing-item-title:hover { } .filesharing-item-title a:link { } .filesharing-item-title a:link:before { top: 3px; content: "\e004"; position: relative; padding: 0; margin: 0 10px 0 0; font: 28px 'ElegantIcons'; left: 0; } .filesharing-item-title a:hover { transition: all 0.15s linear; -moz-transition: all 0.15s linear; -webkit-transition: all 0.15s linear; background-position: 5px 65%; } .filesharing-item-title a:visited { } .filesharing-item-description { font-weight: normal; padding: 15px 18px 18px; margin: 0; } /* @end */ /* @group photo album */ .album-description { margin-bottom: 1rem; } .album-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; margin: 0 -1rem 1rem; } .album-wrapper .thumbnail-wrap { display: block; width: 20% !important; height: auto!important; padding: 2%; } .album-wrapper .thumbnail-wrap .thumbnail-frame { width: 100%!important;} .album-wrapper .thumbnail-wrap .thumbnail-frame>a { display: block; } .album-wrapper .thumbnail-wrap .thumbnail-frame>a>img { -webkit-box-shadow: 0 5px 35px rgba(50,50,93,.1),0 5px 15px rgba(0,0,0,.07); box-shadow: 0 5px 35px rgba(50,50,93,.1),0 5px 15px rgba(0,0,0,.07); width: 100%!important; height: 100%!important; margin-bottom: 6px; } .thumbnail-caption { display: block; text-transform: uppercase; text-align: center; position: relative; margin: 0; padding: 0; font-size: 10px; } /* ------------------- */ /* @group single page photo mode */ /* Single Page (Photo view) */ .photo {} .photo-background { padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; } /* black png */ .photo-navigation { padding: 8px 0 0; text-align: center; margin-right: auto; margin-left: auto; max-width: 340px; background-color: rgba(25, 25, 25, 0.77); } /* new */ .photo-navigation a:link, .photo-navigation a:visited { color: #f2f2f2; text-align: center; } .photo-title { letter-spacing: 1px; color: #ffffff; margin: 0; text-align: center; padding: 0; text-transform: uppercase; } /* color title image below */ .photo-caption { color: #d8d8d8; padding: 0px; margin-top: 7px; } .photo-links { color: #fff; -webkit-box-shadow: 0 0px 5px rgba(0,0,0,.25); -moz-box-shadow: 0 0px 5px rgba(0,0,0,.25); box-shadow: 0 0px 5px rgba(0,0,0,.25); background-color: rgba(16, 16, 16, 0.84); margin: 0; opacity: 0.85; transition: all 0.12s linear; -moz-transition: all 0.12s linear; -webkit-transition: all 0.12s linear; padding: 15px 0; text-transform: uppercase; } .photo-links:hover { opacity: 1.0; transition: all 0.22s linear; -moz-transition: all 0.22s linear; -webkit-transition: all 0.22s linear; } .photo-links a { padding: 0; margin: 0; } .photo-links a:hover, .photo-links a:active {} .photo-navigation a:hover { text-decoration: underline; color: #dbdbdb; } /* photo */ .photo-frame{ width: 94%; /* fallback IE */ height: auto; /* fallback IE */ max-width: 94%; /* fallback IE */ position: absolute; box-shadow: 0px 3px 15px 0px rgba(21, 21, 21, 0.271) ; -webkit-box-shadow: 0px 3px 15px 0px rgba(21, 21, 21, 0.271) ; -moz-box-shadow: 0px 3px 15px 0px rgba(21, 21, 21, 0.271) ; margin-right: auto; padding: 0; margin-left: auto; max-width: 100vw; width:auto; height:auto; max-width: 94vw; max-height: 78vh; text-align: center; right: 0; left: 0; margin-top: 1.5%; } /* ------------ */ /* @group animation on load */ .photo-frame { -webkit-animation: photo-frame 0.55s ease-in !important; animation: photo-frame 0.55s ease-in !important; } @-webkit-keyframes photo-frame{ 0% { opacity: 0;} 100% { opacity: 1; } } @keyframes photo-frame { 0% { opacity: 0;} 100% { opacity: 1; } } /* ---------- */ /* @end */ /* @end */ html > body .photo-background {} html > body .photo-navigation {} /* @end */ /* @group contact form */ .form-input-field:after {} form { } .message-text, .form-footer { margin-top: 0; margin-right: auto; margin-left: auto; padding: 15px 5px; } .required-text { } .form-input-field { background-color: rgba(251, 251, 251, 0.85); color: #5d5d5d; -webkit-transform-style: preserve-3d; /*prvent flicker toolbar*/ transform: scale(1.0); -webkit-transform: scale(1.0); -moz-transform: scale(1.0); transition: all 0.15s ease-in-out; -moz-transition: all 0.15s ease-in-out; -webkit-transition: all 0.15s ease-in-out; margin-left: auto; margin-right: auto; width: 89%; padding: 9px; border: 1px solid #dcdcdc; } .form-input-field:hover { box-shadow: 0 0px 7px rgba(123, 162, 207,1.0); -webkit-box-shadow: 0 0px 7px rgba(123, 162, 207,1.0); -moz-box-shadow: 0 0px 7px rgba(123, 162, 207,1.0); transform: scale(1.01); -webkit-transform: scale(1.01); -moz-transform: scale(1.01); } .form-input-field:focus { transform: scale(1.01); -webkit-transform: scale(1.01); -moz-transform: scale(1.01); position: relative; z-index: 3; } .form-input-field:hover, .form-input-field a:visited { background-color: #fffeff; border-color: #98a9fd; } .form-input-field, .form-input-button { border-radius:1px; -webkit-border-radius:1px; -moz-border-radius:1px; } .form-input-field a:active { border-color: #98a9fd; background-color: #fffeff; } .form-input-field:after {} /* contact form labels */ .rw-contact-form label { padding-bottom: 9px; } .rw-contact-form label { } .rw-contact-form br { } .rw-contact-form input[type=file]+br,.rw-contact-form label+br { } .rw-contact-form input[type=radio]+label { } .form-checkbox-field { } .form-checkbox-field+br { } .form-input-button[type=reset] { } .form-input-button:before { } /* button */ .form-input-button { padding: 8px 14px; color: #666666; border: 1px solid #d5d5d5; text-transform: uppercase; margin: 5px; transition: all 0.20s linear; -moz-transition: all 0.20s linear; -webkit-transition: all 0.20s linear; text-shadow: #f1f1f1 0 1px 0; letter-spacing: 1px; background-color: #eaeaea; } .form-input-button:hover { border: 1px solid #bcbcbc; transition: all 0.18s linear; -moz-transition: all 0.18s linear; -webkit-transition: all 0.18s linear; color: #515151; } .form-input-button:focus { } /* @end */ /* @group Sitemap */ .rw-sitemap {} .rw-sitemap ul a { margin-left: 3px; padding-left: 8px; padding-right: 13px; } .rw-sitemap ul { padding: 0; margin-bottom: 11px; list-style-position: inside; list-style-image: none; list-style-type: none; } .rw-sitemap li { margin-right: 20px;} .rw-sitemap ul { padding-left: 15px;} .rw-sitemap ul ul { margin: 15px;} .rw-sitemap ul ul ul {margin: 10px;} .rw-sitemap ul li { padding-bottom: 7px; margin-bottom: 11px; display: inline-block; transition: all 0.15s ease-in-out; -moz-transition: all 0.15s ease-in-out; -webkit-transition: all 0.15s ease-in-out; padding-top: 7px; border-width: 1px; border-style: solid; } .rw-sitemap ul ul li { position: relative; float: left; display: inline-block; clear: left; margin-right: 10px; border-top-width: 0; border-right-width: 0; border-left-width: 0; border-bottom-width: 1px; } @media only screen and (max-width: 900px) { .rw-sitemap li { margin-right: 10px;} .rw-sitemap ul a { padding-left: 5px; padding-right: 8px; } } @media only screen and (max-width: 480px) { .rw-sitemap li { margin-right: 3px;} .rw-sitemap ul ul { margin: 10px;} .rw-sitemap ul ul ul {margin: 5px;} } /* @end */ /* @group Blog Comments */ /* These groups are used to forcibly over-ride the styles that Disqus and JS-KIT comments apply that break page layouts. It's likely you'll need to use them, however they're not ideal solutions and may not work in the future if the comment providers' Javascript-inserted markup changes. */ /* @group Disqus */ #dsq-comments-title { clear: none !important; } #dsq-content .dsq-options { clear: none !important; } #dsq-thread-settings { clear: none !important; } #dsq-content div { clear: none !important; } .dsq-login-buttons li { clear: none !important; margin-bottom: 25px!important; } .dsq-button { float: none ! important; } /* @end */ /* @group JS-Kit Override */ .js-singleCommentBodyT { display: block; padding-top: 17px !important; } .js-singleCommentHeader { padding: 0 8px !important; } .js-OldComments, .js-commentFieldLabel, .js-pmFieldLabel, .js-singleCommentBody, .js-singleCommentKarmaComMod, .js-commentBodyLabel, .js-commentCmtTextarea, .js-commentAvatarArea, .js-OldCommentsWrap, .js-OldComments, .js-CreateCommentFieldsWrap, .js-CreateCommentFields, .js-commentCmtTextarea, .js-kit-comments div { clear: none !important; } .js-singleCommentText { display: block !important; clear: both !important; } .js-kit-comments br { display: none !important; } .js-singleCommentBody br { display: block !important; } /* @end */ /* @end */ /* @group ___FONT SIZE */ /* reset font size landscape-portraid */ body { -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-text-size-adjust: none;-moz-text-size-adjust: none; } /* body + extracontent --> 100%*/ html, body, header, #container, blockquote, #contentContainer, #contentContainer #content, #sidebarContainer,#sidebarContainer #sidebar, form, div, span, p, code, iframe, img, table, caption, footer, #extraContainer1, #extraContainer2, #extraContainer3, h1, h2, h3, h4, h5, h6 {font-size: 100%; font: inherit; } #container, #extraContainer1, #extraContainer2, #extraContainer3 { line-height: 1.5em; font-size: 0.84em; font-style: normal; } /* @group Global Classes */ h6 {font-size: 17px; line-height: 21px;} h5 {font-size: 19px; line-height: 25px;} h4 {font-size: 24px; line-height: 27px;} h3 {font-size: 27px; line-height: 32px;} h2 {font-size: 32px; line-height: 36px;} h1 {font-size: 40px; line-height: 41px;} h1, h2, h3, h4, h5, h6 {font-weight: normal; font-style: normal; margin: 0; padding: 0; } /* @end */ /* ---text--- */ body, #pageHeader h1, pageHeader h2, #sidebarContainer .sideHeader, #footer a:link, #footer a:visited, #navcontainer a, h1, h2, h3, h4, .blog-archive-month, .blog-entry-title, .blog-entry-date, .album-title, .album-description, .thumbnail-caption, .photo-title, .photo-caption, .photo-title, .photo-caption, .rw-sitemap, .rw-sitemap ul a, .rw-sitemap ul li li a, .rw-sitemap ul li li li a { font-family: "Lucida Grande", Arial, sans-serif; } .album-title { line-height: 1.6em; font-size: 1.5em; text-align: center; } #navcontainer a, #navcontainer ul a { line-height: 50px; font-size: 14px; } #navcontainer ul ul a { line-height: 32px !important; font-size: 13px !important; } .sideHeader_bottom, .sideHeader_top, .sideHeader { } code {font-size: 0.875em;} #sidebarContainer .sideHeader { line-height: 1.5em; font-size: 1.2em; } .rw-sitemap ul a { font-size: 1.065em; } .filesharing-item-title { line-height: 1em; font-size: 1.5em;} .rw-sitemap ul li li a { font-size: 0.95em;} .footer, #footer, #footer p{ font-size: 0.9em; line-height: 1.5em; } #breadcrumbcontainer a,.breadcrumbcontainer2 a { line-height: 33px; font-size: 12px;} .form-input-button, .form-input-field { font-size: 0.85em; } .thumbnail-caption { font-size: 0.8em; } .rw-sitemap ul a { font-size: 17px; } .rw-sitemap ul li li a, .rw-sitemap ul li li li a , .rw-sitemap ul li li li li a, .rw-sitemap ul li li li li li a { font-size: 15px; } /* @end */ /* @group Settings Theme.js */ #up, #up a, #up spam, #up .arrow_carrot-up fa-max-50 {font-size: 0px !important; line-height: 0; margin: 0; padding: 0; width: 0; height: 0; } .settings { position: relative; display: none; } #menuOpened { top: 0px !important; } #parallax_titles { top: 0px !important; } #parallax_pic { top: 0px !important; } #drop_var { top: 0px !important; } /* @end */ /* @group Responsive WdebFonts */ .font-1, .font-1 a:link, .font-1 a:hover, .font-1 a:active, .font-1 a:visited { font-family: 'cordial_prolight', sans-serif !important; } .font-2, .font-2 a:link, .font-2 a:hover, .font-2 a:active, .font-2 a:visited { font-family: 'cordial_proregregular', sans-serif !important; } .font-3, .font-3 a:link, .font-3 a:hover, .font-3 a:active, .font-3 a:visited { font-family: 'cordial_promedium', serif !important; } .font-4, .font-4 a:link, .font-4 a:hover, .font-4 a:active, .font-4 a:visited { font-family: 'cordial_prosemibold', sans-serif !important;} .font-5, .font-5 a:link, .font-5 a:hover, .font-5 a:active, .font-5 a:visited { font-family: 'cordial_probold', sans-serif !important; } .font-6, .font-6 a:link, .font-6 a:hover, .font-6 a:active, .font-6 a:visited { font-family: 'cordial_pro_inlineBdrounded', sans-serif !important;} .font-7, .font-7 a:link, .font-7 a:hover, .font-7 a:active, .font-7 a:visited { font-family: 'cordial_pro_cherryBdrounded', sans-serif !important; } .font-8, .font-8 a:link, .font-8 a:hover, .font-8 a:active, .font-8 a:visited { font-family: 'montserratmedium', sans-serif !important; } .font-9, .font-9 a:link, .font-9 a:hover, .font-9 a:active, .font-9 a:visited { font-family: 'montserratbold', sans-serif !important; } .font-10, .font-10 a:link, .font-10 a:hover, .font-10 a:active, .font-10 a:visited { font-family: 'ralewaylight', serif !important; } .font-11, .font-11 a:link, .font-11 a:hover, .font-11 a:active, .font-11 a:visited { font-family: 'ubunturegular', sans-serif !important;} .font-12, .font-12 a:link, .font-12 a:hover, .font-12 a:active, .font-12 a:visited { font-family: 'signikaregular', sans-serif !important; } .font-13, .font-13 a:link, .font-13 a:hover, .font-13 a:active, .font-13 a:visited { font-family: 'vigaregular', sans-serif !important;} .font-14, .font-14 a:link, .font-14 a:hover, .font-14 a:active, .font-14 a:visited { font-family: 'fjalla_oneregular', sans-serif !important; } .font-15, .font-15 a:link, .font-15 a:hover, .font-15 a:active, .font-15 a:visited { font-family: 'fjalla_oneregular', sans-serif !important; text-transform: uppercase !important;} .font-16, .font-16 a:link, .font-16 a:hover, .font-16 a:active, .font-16 a:visited { font-family: 'archivo_blackregular', sans-serif !important;} .font-1, .font-1 a:link, .font-1 a:hover, .font-1 a:active, .font-1 a:visited, .font-2, .font-2 a:link, .font-2 a:hover, .font-2 a:active, .font-2 a:visited, .font-3, .font-3 a:link, .font-3 a:hover, .font-3 a:active, .font-3 a:visited, .font-4, .font-4 a:link, .font-4 a:hover, .font-4 a:active, .font-4 a:visited, .font-5, .font-5 a:link, .font-5 a:hover, .font-5 a:active, .font-5 a:visited, .font-6, .font-6 a:link, .font-6 a:hover, .font-6 a:active, .font-6 a:visited, .font-7, .font-7 a:link, .font-7 a:hover, .font-7 a:active, .font-7 a:visited, .font-8, .font-8 a:link, .font-8 a:hover, .font-8 a:active, .font-8 a:visited, .font-9, .font-9 a:link, .font-9 a:hover, .font-9 a:active, .font-9 a:visited, .font-10, .font-10 a:link, .font-10 a:hover, .font-10 a:active, .font-10 a:visited, .font-11, .font-11 a:link, .font-11 a:hover, .font-11 a:active, .font-11 a:visited, .font-12, .font-12 a:link, .font-12 a:hover, .font-12 a:active, .font-12 a:visited, .font-13, .font-13 a:link, .font-13 a:hover, .font-13 a:active, .font-13 a:visited, .font-14, .font-14 a:link, .font-14 a:hover, .font-14 a:active, .font-14 a:visited, .font-15, .font-15 a:link, .font-15 a:hover, .font-15 a:active, .font-15 a:visited, .font-16, .font-16 a:link, .font-16 a:hover, .font-16 a:active, .font-16 a:visited { transition: all 0s linear !important; -moz-transition: all 0s linear !important; -webkit-transition: all 0s linear !important; transition-property: color !important; transition-duration: 0ms !important; -webkit-transition-property: color !important; -webkit-transition-duration: 0ms !important; -moz-transition-property: color !important; -moz-transition-duration: 0ms !important; padding-top: 0!important; padding-bottom: 0!important; margin-top: 0!important; margin-bottom: 0!important; line-height: 1.1em; } /* @end */ @media only screen and (max-width: 800px) {#cordialhype .HYPE_document { min-height: 130px !important; }} @media only screen and (max-width: 700px) { #navcontainer2 { width: 96%; margin-right: 0; margin-left: 0; padding-right: 2%; padding-left: 2%;} #footer, #breadcrumbcontainer { float: none; text-align: center; padding: 5px 0 0; width: 96%; margin-left: 2%; } #blog-archives { line-height: 20px; float: left; width: 42%; } #blog-categories { float: left; width: 42%; } ul.blog-tag-cloud { float: left; width: 91%; } .blog-rss-link, .blog-comments-rss-link, .blog-rss-link, .blog-comments-rss-link { padding-left: 6%; } .filesharing-item { display: inline; margin: 2% 3% 20px 1%; width: 96%;} #logo img { max-height:70px;} } @media only screen and (max-width: 480px) { #cordialhype .HYPE_document { min-height: 110px !important; } .thumbnail-wrap { margin-bottom: 10%;} #blog-archives { width: 89%;} #blog-categories { width: 89%;} ul.blog-tag-cloud { width: 89%;} #logo img { max-height:60px;} } @media only screen and (max-width: 380px) { #cordialhype .HYPE_document{ min-height: 100px !important; } } /* ------------- */ @font-face { font-family: 'ElegantIcons'; src:url('css/webfonts/ElegantIcons/ElegantIcons.eot'); src:url('css/webfonts/ElegantIcons/ElegantIcons.eot?#iefix') format('embedded-opentype'), url('css/webfonts/ElegantIcons/ElegantIcons.woff') format('woff'), url('css/webfonts/ElegantIcons/ElegantIcons.ttf') format('truetype'), url('css/webfonts/ElegantIcons/ElegantIcons.svg#ElegantIcons') format('svg'); font-weight: normal; font-style: normal; } /* @group ElegantFont */ /* Use the following CSS code if you want to use data attributes for inserting your icons */ [data-icon]:before { font-family: 'ElegantIcons'; content: attr(data-icon); speak: none; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Use the following CSS code if you want to have a class per icon */ /* Instead of a list of all class selectors, you can use the generic selector below, but it's slower: [class*="your-class-prefix"] { */ .arrow_up, .arrow_down, .arrow_left, .arrow_right, .arrow_left-up, .arrow_right-up, .arrow_right-down, .arrow_left-down, .arrow-up-down, .arrow_up-down_alt, .arrow_left-right_alt, .arrow_left-right, .arrow_expand_alt2, .arrow_expand_alt, .arrow_condense, .arrow_expand, .arrow_move, .arrow_carrot-up, .arrow_carrot-down, .arrow_carrot-left, .arrow_carrot-right, .arrow_carrot-2up, .arrow_carrot-2down, .arrow_carrot-2left, .arrow_carrot-2right, .arrow_carrot-up_alt2, .arrow_carrot-down_alt2, .arrow_carrot-left_alt2, .arrow_carrot-right_alt2, .arrow_carrot-2up_alt2, .arrow_carrot-2down_alt2, .arrow_carrot-2left_alt2, .arrow_carrot-2right_alt2, .arrow_triangle-up, .arrow_triangle-down, .arrow_triangle-left, .arrow_triangle-right, .arrow_triangle-up_alt2, .arrow_triangle-down_alt2, .arrow_triangle-left_alt2, .arrow_triangle-right_alt2, .arrow_back, .icon_minus-06, .icon_plus, .icon_close, .icon_check, .icon_minus_alt2, .icon_plus_alt2, .icon_close_alt2, .icon_check_alt2, .icon_zoom-out_alt, .icon_zoom-in_alt, .icon_search, .icon_box-empty, .icon_box-selected, .icon_minus-box, .icon_plus-box, .icon_box-checked, .icon_circle-empty, .icon_circle-slelected, .icon_stop_alt2, .icon_stop, .icon_pause_alt2, .icon_pause, .icon_menu, .icon_menu-square_alt2, .icon_menu-circle_alt2, .icon_ul, .icon_ol, .icon_adjust-horiz, .icon_adjust-vert, .icon_document_alt, .icon_documents_alt, .icon_pencil, .icon_pencil-edit_alt, .icon_pencil-edit, .icon_folder-alt, .icon_folder-open_alt, .icon_folder-add_alt, .icon_info_alt, .icon_error-oct_alt, .icon_error-circle_alt, .icon_error-triangle_alt, .icon_question_alt2, .icon_question, .icon_comment_alt, .icon_chat_alt, .icon_vol-mute_alt, .icon_volume-low_alt, .icon_volume-high_alt, .icon_quotations, .icon_quotations_alt2, .icon_clock_alt, .icon_lock_alt, .icon_lock-open_alt, .icon_key_alt, .icon_cloud_alt, .icon_cloud-upload_alt, .icon_cloud-download_alt, .icon_image, .icon_images, .icon_lightbulb_alt, .icon_gift_alt, .icon_house_alt, .icon_genius, .icon_mobile, .icon_tablet, .icon_laptop, .icon_desktop, .icon_camera_alt, .icon_mail_alt, .icon_cone_alt, .icon_ribbon_alt, .icon_bag_alt, .icon_creditcard, .icon_cart_alt, .icon_paperclip, .icon_tag_alt, .icon_tags_alt, .icon_trash_alt, .icon_cursor_alt, .icon_mic_alt, .icon_compass_alt, .icon_pin_alt, .icon_pushpin_alt, .icon_map_alt, .icon_drawer_alt, .icon_toolbox_alt, .icon_book_alt, .icon_calendar, .icon_film, .icon_table, .icon_contacts_alt, .icon_headphones, .icon_lifesaver, .icon_piechart, .icon_refresh, .icon_link_alt, .icon_link, .icon_loading, .icon_blocked, .icon_archive_alt, .icon_heart_alt, .icon_star_alt, .icon_star-half_alt, .icon_star, .icon_star-half, .icon_tools, .icon_tool, .icon_cog, .icon_cogs, .arrow_up_alt, .arrow_down_alt, .arrow_left_alt, .arrow_right_alt, .arrow_left-up_alt, .arrow_right-up_alt, .arrow_right-down_alt, .arrow_left-down_alt, .arrow_condense_alt, .arrow_expand_alt3, .arrow_carrot_up_alt, .arrow_carrot-down_alt, .arrow_carrot-left_alt, .arrow_carrot-right_alt, .arrow_carrot-2up_alt, .arrow_carrot-2dwnn_alt, .arrow_carrot-2left_alt, .arrow_carrot-2right_alt, .arrow_triangle-up_alt, .arrow_triangle-down_alt, .arrow_triangle-left_alt, .arrow_triangle-right_alt, .icon_minus_alt, .icon_plus_alt, .icon_close_alt, .icon_check_alt, .icon_zoom-out, .icon_zoom-in, .icon_stop_alt, .icon_menu-square_alt, .icon_menu-circle_alt, .icon_document, .icon_documents, .icon_pencil_alt, .icon_folder, .icon_folder-open, .icon_folder-add, .icon_folder_upload, .icon_folder_download, .icon_info, .icon_error-circle, .icon_error-oct, .icon_error-triangle, .icon_question_alt, .icon_comment, .icon_chat, .icon_vol-mute, .icon_volume-low, .icon_volume-high, .icon_quotations_alt, .icon_clock, .icon_lock, .icon_lock-open, .icon_key, .icon_cloud, .icon_cloud-upload, .icon_cloud-download, .icon_lightbulb, .icon_gift, .icon_house, .icon_camera, .icon_mail, .icon_cone, .icon_ribbon, .icon_bag, .icon_cart, .icon_tag, .icon_tags, .icon_trash, .icon_cursor, .icon_mic, .icon_compass, .icon_pin, .icon_pushpin, .icon_map, .icon_drawer, .icon_toolbox, .icon_book, .icon_contacts, .icon_archive, .icon_heart, .icon_profile, .icon_group, .icon_grid-2x2, .icon_grid-3x3, .icon_music, .icon_pause_alt, .icon_phone, .icon_upload, .icon_download, .social_facebook, .social_twitter, .social_pinterest, .social_googleplus, .social_tumblr, .social_tumbleupon, .social_wordpress, .social_instagram, .social_dribbble, .social_vimeo, .social_linkedin, .social_rss, .social_deviantart, .social_share, .social_myspace, .social_skype, .social_youtube, .social_picassa, .social_googledrive, .social_flickr, .social_blogger, .social_spotify, .social_delicious, .social_facebook_circle, .social_twitter_circle, .social_pinterest_circle, .social_googleplus_circle, .social_tumblr_circle, .social_stumbleupon_circle, .social_wordpress_circle, .social_instagram_circle, .social_dribbble_circle, .social_vimeo_circle, .social_linkedin_circle, .social_rss_circle, .social_deviantart_circle, .social_share_circle, .social_myspace_circle, .social_skype_circle, .social_youtube_circle, .social_picassa_circle, .social_googledrive_alt2, .social_flickr_circle, .social_blogger_circle, .social_spotify_circle, .social_delicious_circle, .social_facebook_square, .social_twitter_square, .social_pinterest_square, .social_googleplus_square, .social_tumblr_square, .social_stumbleupon_square, .social_wordpress_square, .social_instagram_square, .social_dribbble_square, .social_vimeo_square, .social_linkedin_square, .social_rss_square, .social_deviantart_square, .social_share_square, .social_myspace_square, .social_skype_square, .social_youtube_square, .social_picassa_square, .social_googledrive_square, .social_flickr_square, .social_blogger_square, .social_spotify_square, .social_delicious_square, .icon_printer, .icon_calulator, .icon_building, .icon_floppy, .icon_drive, .icon_search-2, .icon_id, .icon_id-2, .icon_puzzle, .icon_like, .icon_dislike, .icon_mug, .icon_currency, .icon_wallet, .icon_pens, .icon_easel, .icon_flowchart, .icon_datareport, .icon_briefcase, .icon_shield, .icon_percent, .icon_globe, .icon_globe-2, .icon_target, .icon_hourglass, .icon_balance, .icon_rook, .icon_printer-alt, .icon_calculator_alt, .icon_building_alt, .icon_floppy_alt, .icon_drive_alt, .icon_search_alt, .icon_id_alt, .icon_id-2_alt, .icon_puzzle_alt, .icon_like_alt, .icon_dislike_alt, .icon_mug_alt, .icon_currency_alt, .icon_wallet_alt, .icon_pens_alt, .icon_easel_alt, .icon_flowchart_alt, .icon_datareport_alt, .icon_briefcase_alt, .icon_shield_alt, .icon_percent_alt, .icon_globe_alt, .icon_clipboard { font-family: 'ElegantIcons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; display: inline-block; /* Added "inline-block" in order to use all Awesome font classes and also the Plus code (animations) */ } .arrow_up:before { content: "\21"; } .arrow_down:before { content: "\22"; } .arrow_left:before { content: "\23"; } .arrow_right:before { content: "\24"; } .arrow_left-up:before { content: "\25"; } .arrow_right-up:before { content: "\26"; } .arrow_right-down:before { content: "\27"; } .arrow_left-down:before { content: "\28"; } .arrow-up-down:before { content: "\29"; } .arrow_up-down_alt:before { content: "\2a"; } .arrow_left-right_alt:before { content: "\2b"; } .arrow_left-right:before { content: "\2c"; } .arrow_expand_alt2:before { content: "\2d"; } .arrow_expand_alt:before { content: "\2e"; } .arrow_condense:before { content: "\2f"; } .arrow_expand:before { content: "\30"; } .arrow_move:before { content: "\31"; } .arrow_carrot-up:before { content: "\32"; } .arrow_carrot-down:before { content: "\33"; } .arrow_carrot-left:before { content: "\34"; } .arrow_carrot-right:before { content: "\35"; } .arrow_carrot-2up:before { content: "\36"; } .arrow_carrot-2down:before { content: "\37"; } .arrow_carrot-2left:before { content: "\38"; } .arrow_carrot-2right:before { content: "\39"; } .arrow_carrot-up_alt2:before { content: "\3a"; } .arrow_carrot-down_alt2:before { content: "\3b"; } .arrow_carrot-left_alt2:before { content: "\3c"; } .arrow_carrot-right_alt2:before { content: "\3d"; } .arrow_carrot-2up_alt2:before { content: "\3e"; } .arrow_carrot-2down_alt2:before { content: "\3f"; } .arrow_carrot-2left_alt2:before { content: "\40"; } .arrow_carrot-2right_alt2:before { content: "\41"; } .arrow_triangle-up:before { content: "\42"; } .arrow_triangle-down:before { content: "\43"; } .arrow_triangle-left:before { content: "\44"; } .arrow_triangle-right:before { content: "\45"; } .arrow_triangle-up_alt2:before { content: "\46"; } .arrow_triangle-down_alt2:before { content: "\47"; } .arrow_triangle-left_alt2:before { content: "\48"; } .arrow_triangle-right_alt2:before { content: "\49"; } .arrow_back:before { content: "\4a"; } .icon_minus-06:before { content: "\4b"; } .icon_plus:before { content: "\4c"; } .icon_close:before { content: "\4d"; } .icon_check:before { content: "\4e"; } .icon_minus_alt2:before { content: "\4f"; } .icon_plus_alt2:before { content: "\50"; } .icon_close_alt2:before { content: "\51"; } .icon_check_alt2:before { content: "\52"; } .icon_zoom-out_alt:before { content: "\53"; } .icon_zoom-in_alt:before { content: "\54"; } .icon_search:before { content: "\55"; } .icon_box-empty:before { content: "\56"; } .icon_box-selected:before { content: "\57"; } .icon_minus-box:before { content: "\58"; } .icon_plus-box:before { content: "\59"; } .icon_box-checked:before { content: "\5a"; } .icon_circle-empty:before { content: "\5b"; } .icon_circle-slelected:before { content: "\5c"; } .icon_stop_alt2:before { content: "\5d"; } .icon_stop:before { content: "\5e"; } .icon_pause_alt2:before { content: "\5f"; } .icon_pause:before { content: "\60"; } .icon_menu:before { content: "\61"; } .icon_menu-square_alt2:before { content: "\62"; } .icon_menu-circle_alt2:before { content: "\63"; } .icon_ul:before { content: "\64"; } .icon_ol:before { content: "\65"; } .icon_adjust-horiz:before { content: "\66"; } .icon_adjust-vert:before { content: "\67"; } .icon_document_alt:before { content: "\68"; } .icon_documents_alt:before { content: "\69"; } .icon_pencil:before { content: "\6a"; } .icon_pencil-edit_alt:before { content: "\6b"; } .icon_pencil-edit:before { content: "\6c"; } .icon_folder-alt:before { content: "\6d"; } .icon_folder-open_alt:before { content: "\6e"; } .icon_folder-add_alt:before { content: "\6f"; } .icon_info_alt:before { content: "\70"; } .icon_error-oct_alt:before { content: "\71"; } .icon_error-circle_alt:before { content: "\72"; } .icon_error-triangle_alt:before { content: "\73"; } .icon_question_alt2:before { content: "\74"; } .icon_question:before { content: "\75"; } .icon_comment_alt:before { content: "\76"; } .icon_chat_alt:before { content: "\77"; } .icon_vol-mute_alt:before { content: "\78"; } .icon_volume-low_alt:before { content: "\79"; } .icon_volume-high_alt:before { content: "\7a"; } .icon_quotations:before { content: "\7b"; } .icon_quotations_alt2:before { content: "\7c"; } .icon_clock_alt:before { content: "\7d"; } .icon_lock_alt:before { content: "\7e"; } .icon_lock-open_alt:before { content: "\e000"; } .icon_key_alt:before { content: "\e001"; } .icon_cloud_alt:before { content: "\e002"; } .icon_cloud-upload_alt:before { content: "\e003"; } .icon_cloud-download_alt:before { content: "\e004"; } .icon_image:before { content: "\e005"; } .icon_images:before { content: "\e006"; } .icon_lightbulb_alt:before { content: "\e007"; } .icon_gift_alt:before { content: "\e008"; } .icon_house_alt:before { content: "\e009"; } .icon_genius:before { content: "\e00a"; } .icon_mobile:before { content: "\e00b"; } .icon_tablet:before { content: "\e00c"; } .icon_laptop:before { content: "\e00d"; } .icon_desktop:before { content: "\e00e"; } .icon_camera_alt:before { content: "\e00f"; } .icon_mail_alt:before { content: "\e010"; } .icon_cone_alt:before { content: "\e011"; } .icon_ribbon_alt:before { content: "\e012"; } .icon_bag_alt:before { content: "\e013"; } .icon_creditcard:before { content: "\e014"; } .icon_cart_alt:before { content: "\e015"; } .icon_paperclip:before { content: "\e016"; } .icon_tag_alt:before { content: "\e017"; } .icon_tags_alt:before { content: "\e018"; } .icon_trash_alt:before { content: "\e019"; } .icon_cursor_alt:before { content: "\e01a"; } .icon_mic_alt:before { content: "\e01b"; } .icon_compass_alt:before { content: "\e01c"; } .icon_pin_alt:before { content: "\e01d"; } .icon_pushpin_alt:before { content: "\e01e"; } .icon_map_alt:before { content: "\e01f"; } .icon_drawer_alt:before { content: "\e020"; } .icon_toolbox_alt:before { content: "\e021"; } .icon_book_alt:before { content: "\e022"; } .icon_calendar:before { content: "\e023"; } .icon_film:before { content: "\e024"; } .icon_table:before { content: "\e025"; } .icon_contacts_alt:before { content: "\e026"; } .icon_headphones:before { content: "\e027"; } .icon_lifesaver:before { content: "\e028"; } .icon_piechart:before { content: "\e029"; } .icon_refresh:before { content: "\e02a"; } .icon_link_alt:before { content: "\e02b"; } .icon_link:before { content: "\e02c"; } .icon_loading:before { content: "\e02d"; } .icon_blocked:before { content: "\e02e"; } .icon_archive_alt:before { content: "\e02f"; } .icon_heart_alt:before { content: "\e030"; } .icon_star_alt:before { content: "\e031"; } .icon_star-half_alt:before { content: "\e032"; } .icon_star:before { content: "\e033"; } .icon_star-half:before { content: "\e034"; } .icon_tools:before { content: "\e035"; } .icon_tool:before { content: "\e036"; } .icon_cog:before { content: "\e037"; } .icon_cogs:before { content: "\e038"; } .arrow_up_alt:before { content: "\e039"; } .arrow_down_alt:before { content: "\e03a"; } .arrow_left_alt:before { content: "\e03b"; } .arrow_right_alt:before { content: "\e03c"; } .arrow_left-up_alt:before { content: "\e03d"; } .arrow_right-up_alt:before { content: "\e03e"; } .arrow_right-down_alt:before { content: "\e03f"; } .arrow_left-down_alt:before { content: "\e040"; } .arrow_condense_alt:before { content: "\e041"; } .arrow_expand_alt3:before { content: "\e042"; } .arrow_carrot_up_alt:before { content: "\e043"; } .arrow_carrot-down_alt:before { content: "\e044"; } .arrow_carrot-left_alt:before { content: "\e045"; } .arrow_carrot-right_alt:before { content: "\e046"; } .arrow_carrot-2up_alt:before { content: "\e047"; } .arrow_carrot-2dwnn_alt:before { content: "\e048"; } .arrow_carrot-2left_alt:before { content: "\e049"; } .arrow_carrot-2right_alt:before { content: "\e04a"; } .arrow_triangle-up_alt:before { content: "\e04b"; } .arrow_triangle-down_alt:before { content: "\e04c"; } .arrow_triangle-left_alt:before { content: "\e04d"; } .arrow_triangle-right_alt:before { content: "\e04e"; } .icon_minus_alt:before { content: "\e04f"; } .icon_plus_alt:before { content: "\e050"; } .icon_close_alt:before { content: "\e051"; } .icon_check_alt:before { content: "\e052"; } .icon_zoom-out:before { content: "\e053"; } .icon_zoom-in:before { content: "\e054"; } .icon_stop_alt:before { content: "\e055"; } .icon_menu-square_alt:before { content: "\e056"; } .icon_menu-circle_alt:before { content: "\e057"; } .icon_document:before { content: "\e058"; } .icon_documents:before { content: "\e059"; } .icon_pencil_alt:before { content: "\e05a"; } .icon_folder:before { content: "\e05b"; } .icon_folder-open:before { content: "\e05c"; } .icon_folder-add:before { content: "\e05d"; } .icon_folder_upload:before { content: "\e05e"; } .icon_folder_download:before { content: "\e05f"; } .icon_info:before { content: "\e060"; } .icon_error-circle:before { content: "\e061"; } .icon_error-oct:before { content: "\e062"; } .icon_error-triangle:before { content: "\e063"; } .icon_question_alt:before { content: "\e064"; } .icon_comment:before { content: "\e065"; } .icon_chat:before { content: "\e066"; } .icon_vol-mute:before { content: "\e067"; } .icon_volume-low:before { content: "\e068"; } .icon_volume-high:before { content: "\e069"; } .icon_quotations_alt:before { content: "\e06a"; } .icon_clock:before { content: "\e06b"; } .icon_lock:before { content: "\e06c"; } .icon_lock-open:before { content: "\e06d"; } .icon_key:before { content: "\e06e"; } .icon_cloud:before { content: "\e06f"; } .icon_cloud-upload:before { content: "\e070"; } .icon_cloud-download:before { content: "\e071"; } .icon_lightbulb:before { content: "\e072"; } .icon_gift:before { content: "\e073"; } .icon_house:before { content: "\e074"; } .icon_camera:before { content: "\e075"; } .icon_mail:before { content: "\e076"; } .icon_cone:before { content: "\e077"; } .icon_ribbon:before { content: "\e078"; } .icon_bag:before { content: "\e079"; } .icon_cart:before { content: "\e07a"; } .icon_tag:before { content: "\e07b"; } .icon_tags:before { content: "\e07c"; } .icon_trash:before { content: "\e07d"; } .icon_cursor:before { content: "\e07e"; } .icon_mic:before { content: "\e07f"; } .icon_compass:before { content: "\e080"; } .icon_pin:before { content: "\e081"; } .icon_pushpin:before { content: "\e082"; } .icon_map:before { content: "\e083"; } .icon_drawer:before { content: "\e084"; } .icon_toolbox:before { content: "\e085"; } .icon_book:before { content: "\e086"; } .icon_contacts:before { content: "\e087"; } .icon_archive:before { content: "\e088"; } .icon_heart:before { content: "\e089"; } .icon_profile:before { content: "\e08a"; } .icon_group:before { content: "\e08b"; } .icon_grid-2x2:before { content: "\e08c"; } .icon_grid-3x3:before { content: "\e08d"; } .icon_music:before { content: "\e08e"; } .icon_pause_alt:before { content: "\e08f"; } .icon_phone:before { content: "\e090"; } .icon_upload:before { content: "\e091"; } .icon_download:before { content: "\e092"; } .social_facebook:before { content: "\e093"; } .social_twitter:before { content: "\e094"; } .social_pinterest:before { content: "\e095"; } .social_googleplus:before { content: "\e096"; } .social_tumblr:before { content: "\e097"; } .social_tumbleupon:before { content: "\e098"; } .social_wordpress:before { content: "\e099"; } .social_instagram:before { content: "\e09a"; } .social_dribbble:before { content: "\e09b"; } .social_vimeo:before { content: "\e09c"; } .social_linkedin:before { content: "\e09d"; } .social_rss:before { content: "\e09e"; } .social_deviantart:before { content: "\e09f"; } .social_share:before { content: "\e0a0"; } .social_myspace:before { content: "\e0a1"; } .social_skype:before { content: "\e0a2"; } .social_youtube:before { content: "\e0a3"; } .social_picassa:before { content: "\e0a4"; } .social_googledrive:before { content: "\e0a5"; } .social_flickr:before { content: "\e0a6"; } .social_blogger:before { content: "\e0a7"; } .social_spotify:before { content: "\e0a8"; } .social_delicious:before { content: "\e0a9"; } .social_facebook_circle:before { content: "\e0aa"; } .social_twitter_circle:before { content: "\e0ab"; } .social_pinterest_circle:before { content: "\e0ac"; } .social_googleplus_circle:before { content: "\e0ad"; } .social_tumblr_circle:before { content: "\e0ae"; } .social_stumbleupon_circle:before { content: "\e0af"; } .social_wordpress_circle:before { content: "\e0b0"; } .social_instagram_circle:before { content: "\e0b1"; } .social_dribbble_circle:before { content: "\e0b2"; } .social_vimeo_circle:before { content: "\e0b3"; } .social_linkedin_circle:before { content: "\e0b4"; } .social_rss_circle:before { content: "\e0b5"; } .social_deviantart_circle:before { content: "\e0b6"; } .social_share_circle:before { content: "\e0b7"; } .social_myspace_circle:before { content: "\e0b8"; } .social_skype_circle:before { content: "\e0b9"; } .social_youtube_circle:before { content: "\e0ba"; } .social_picassa_circle:before { content: "\e0bb"; } .social_googledrive_alt2:before { content: "\e0bc"; } .social_flickr_circle:before { content: "\e0bd"; } .social_blogger_circle:before { content: "\e0be"; } .social_spotify_circle:before { content: "\e0bf"; } .social_delicious_circle:before { content: "\e0c0"; } .social_facebook_square:before { content: "\e0c1"; } .social_twitter_square:before { content: "\e0c2"; } .social_pinterest_square:before { content: "\e0c3"; } .social_googleplus_square:before { content: "\e0c4"; } .social_tumblr_square:before { content: "\e0c5"; } .social_stumbleupon_square:before { content: "\e0c6"; } .social_wordpress_square:before { content: "\e0c7"; } .social_instagram_square:before { content: "\e0c8"; } .social_dribbble_square:before { content: "\e0c9"; } .social_vimeo_square:before { content: "\e0ca"; } .social_linkedin_square:before { content: "\e0cb"; } .social_rss_square:before { content: "\e0cc"; } .social_deviantart_square:before { content: "\e0cd"; } .social_share_square:before { content: "\e0ce"; } .social_myspace_square:before { content: "\e0cf"; } .social_skype_square:before { content: "\e0d0"; } .social_youtube_square:before { content: "\e0d1"; } .social_picassa_square:before { content: "\e0d2"; } .social_googledrive_square:before { content: "\e0d3"; } .social_flickr_square:before { content: "\e0d4"; } .social_blogger_square:before { content: "\e0d5"; } .social_spotify_square:before { content: "\e0d6"; } .social_delicious_square:before { content: "\e0d7"; } .icon_printer:before { content: "\e103"; } .icon_calulator:before { content: "\e0ee"; } .icon_building:before { content: "\e0ef"; } .icon_floppy:before { content: "\e0e8"; } .icon_drive:before { content: "\e0ea"; } .icon_search-2:before { content: "\e101"; } .icon_id:before { content: "\e107"; } .icon_id-2:before { content: "\e108"; } .icon_puzzle:before { content: "\e102"; } .icon_like:before { content: "\e106"; } .icon_dislike:before { content: "\e0eb"; } .icon_mug:before { content: "\e105"; } .icon_currency:before { content: "\e0ed"; } .icon_wallet:before { content: "\e100"; } .icon_pens:before { content: "\e104"; } .icon_easel:before { content: "\e0e9"; } .icon_flowchart:before { content: "\e109"; } .icon_datareport:before { content: "\e0ec"; } .icon_briefcase:before { content: "\e0fe"; } .icon_shield:before { content: "\e0f6"; } .icon_percent:before { content: "\e0fb"; } .icon_globe:before { content: "\e0e2"; } .icon_globe-2:before { content: "\e0e3"; } .icon_target:before { content: "\e0f5"; } .icon_hourglass:before { content: "\e0e1"; } .icon_balance:before { content: "\e0ff"; } .icon_rook:before { content: "\e0f8"; } .icon_printer-alt:before { content: "\e0fa"; } .icon_calculator_alt:before { content: "\e0e7"; } .icon_building_alt:before { content: "\e0fd"; } .icon_floppy_alt:before { content: "\e0e4"; } .icon_drive_alt:before { content: "\e0e5"; } .icon_search_alt:before { content: "\e0f7"; } .icon_id_alt:before { content: "\e0e0"; } .icon_id-2_alt:before { content: "\e0fc"; } .icon_puzzle_alt:before { content: "\e0f9"; } .icon_like_alt:before { content: "\e0dd"; } .icon_dislike_alt:before { content: "\e0f1"; } .icon_mug_alt:before { content: "\e0dc"; } .icon_currency_alt:before { content: "\e0f3"; } .icon_wallet_alt:before { content: "\e0d8"; } .icon_pens_alt:before { content: "\e0db"; } .icon_easel_alt:before { content: "\e0f0"; } .icon_flowchart_alt:before { content: "\e0df"; } .icon_datareport_alt:before { content: "\e0f2"; } .icon_briefcase_alt:before { content: "\e0f4"; } .icon_shield_alt:before { content: "\e0d9"; } .icon_percent_alt:before { content: "\e0da"; } .icon_globe_alt:before { content: "\e0de"; } .icon_clipboard:before { content: "\e0e6"; } .glyph { float: left; text-align: center; padding: .75em; margin: .4em 1.5em .75em 0; width: 6em; text-shadow: none; } .glyph_big { font-size: 128px; color: #59c5dc; float: left; margin-right: 20px; } .glyph div { padding-bottom: 10px;} .glyph input { font-family: consolas, monospace; font-size: 12px; width: 100%; text-align: center; border: 0; box-shadow: 0 0 0 1px #ccc; padding: .2em; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .centered { margin-left: auto; margin-right: auto; } .glyph .fs1 { font-size: 2em; } /* @end */ /* ------------- */ /* @group Plus Code 1_1 Awesome Font icon 4 animated */ /* @group Social icons background - colored */ .fa-box-custom { background-color: #FFE913 !important; border-radius: .1em; color: #fefffe !important; width: 1.2857142857142858em; text-align: center; padding-top: .15em !important; padding-bottom: .15em !important; line-height: 1em !important; } /* ------CIRCLE icon----- */ .fa-box-o {border-radius: 1em !important;} .fa-box-o-half { border-radius: 1em !important; border-top-left-radius:0.1em !important; -webkit-border-top-left-radius:0.1em !important; border-top-right-radius:0.7em !important; -webkit-border-top-right-radius:0.7em !important; border-bottom-left-radius:0.7em !important; -webkit-border-bottom-left-radius:0.7em !important; border-bottom-right-radius:0.1em !important; -webkit-border-bottom-right-radius:0.1em !important; } /* ------CIRCLE icon hover----- */ .fa-box-o-square { border-radius: 1em !important; /* Prevent Webkit text rendering */ -webkit-transform: translateZ(0px); border-radius: 0.1em !important; transition: all 0.25s ease-out; -webkit-transition: all 0.25s ease-out; transition-delay: 23ms; -webkit-transition-delay: 23ms; } .fa-box-o-square:hover { border-radius: 1em !important;} /* ------CIRCLE end ----- */ .fa-box-silver { /* _____BETA STYLE_______ */ background: -webkit-linear-gradient(#fefffe, #858585); background: linear-gradient(#fefffe, #858585); background: -o-linear-gradient(#fefffe, #858585); color: #4c4b4c !important; filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#fefffe', EndColorStr='#858585', GradientType=0); /* MSIE */ border-radius: .1em; width: 1.2857142857142858em; text-align: center; padding-top: .15em !important; padding-bottom: .15em !important; text-shadow: #f0f0f0 0 1px 0 !important; line-height: 1em !important; } .fa-box-black { background-color: #0c0c0c !important; border-radius: .1em; color: #fefffe !important; width: 1.2857142857142858em; text-align: center; padding-top: .15em !important; padding-bottom: .15em !important; line-height: 1em !important; } .fa-box-grey { background-color: #919191 !important; border-radius: .1em; color: #fefffe !important; width: 1.2857142857142858em; text-align: center; padding-top: .15em !important; padding-bottom: .15em !important; line-height: 1em !important; } .fa-box-white { background-color: #f9f9f9 !important; border-radius: .1em; color: #5f5f5f !important; width: 1.2857142857142858em; text-align: center; padding-top: .15em !important; padding-bottom: .15em !important; line-height: 1em !important; } .fa-box-google-plus { background-color: #dd4b39 !important; border-radius: .1em; color: #fefffe !important; width: 1.2857142857142858em; text-align: center; padding-top: .15em !important; padding-bottom: .15em !important; line-height: 1em !important; } .fa-box-blogger { background-color: #FF8833 !important; border-radius: .1em; color: #fefffe !important; width: 1.2857142857142858em; text-align: center; padding-top: .15em !important; padding-bottom: .15em !important; line-height: 1em !important; } .fa-box-facebook { background-color: #3B5998 !important; border-radius: .1em; /* Prevent Webkit text rendering and also using slideshow*/ -webkit-transform: translateZ(0px); color: #fefffe !important; width: 1.2857142857142858em; text-align: center; padding-top: .15em !important; padding-bottom: .15em !important; line-height: 1em !important; } .fa-box-flickr { background-color: #FE0883 !important; border-radius: .1em; color: #fefffe !important; width: 1.2857142857142858em; text-align: center; padding-top: .15em !important; padding-bottom: .15em !important; line-height: 1em !important; } .fa-box-foursquare { background-color: #0072B1 !important; border-radius: .1em; color: #fefffe !important; width: 1.2857142857142858em; text-align: center; padding-top: .15em !important; padding-bottom: .15em !important; line-height: 1em !important; } .fa-box-instagram { background-color: #4E433C !important; border-radius: .1em; color: #fefffe !important; width: 1.2857142857142858em; text-align: center; padding-top: .15em !important; padding-bottom: .15em !important; line-height: 1em !important; } .fa-box-linkedin { background-color: #4875B4 !important; border-radius: .1em; color: #fefffe !important; width: 1.2857142857142858em; text-align: center; padding-top: .15em !important; padding-bottom: .15em !important; line-height: 1em !important; } .fa-box-reddit { background-color: #CEE3F8 !important; border-radius: .1em; color: #6d6d6d !important; width: 1.2857142857142858em; text-align: center; padding-top: .15em !important; padding-bottom: .15em !important; line-height: 1em !important; } .fa-box-rss { background-color: #FA9B39 !important; border-radius: .1em; color: #fefffe !important; width: 1.2857142857142858em; text-align: center; padding-top: .15em !important; padding-bottom: .15em !important; line-height: 1em !important; } .fa-box-github-alt { background-color: #e57300 !important; border-radius: .1em; color: #fefffe !important; width: 1.2857142857142858em; text-align: center; padding-top: .15em !important; padding-bottom: .15em !important; line-height: 1em !important; } .fa-box-stumbleupon { background-color: #EB4924 !important; border-radius: .1em; color: #fefffe !important; width: 1.2857142857142858em; text-align: center; padding-top: .15em !important; padding-bottom: .15em !important; line-height: 1em !important; } .fa-box-tumblr { background-color: #34526F !important; border-radius: .1em; color: #fefffe !important; width: 1.2857142857142858em; text-align: center; padding-top: .15em !important; padding-bottom: .15em !important; line-height: 1em !important; } .fa-box-twitter { background-color: #00A0D1 !important; border-radius: .1em; color: #fefffe !important; width: 1.2857142857142858em; text-align: center; padding-top: .15em !important; padding-bottom: .15em !important; line-height: 1em !important; } .fa-box-pagelines { background-color: #4f92b1 !important; border-radius: .1em; color: #fefffe !important; width: 1.2857142857142858em; text-align: center; padding-top: .15em !important; padding-bottom: .15em !important; line-height: 1em !important; } .fa-box-vimeo-blue { background-color: #44BBFF !important; border-radius: .1em; color: #fefffe !important; width: 1.2857142857142858em; text-align: center; padding-top: .15em !important; padding-bottom: .15em !important; line-height: 1em !important; } .fa-box-vimeo { background-color: #AAD450 !important; border-radius: .1em; color: #fefffe !important; width: 1.2857142857142858em; text-align: center; padding-top: .15em !important; padding-bottom: .15em !important; line-height: 1em !important; } .fa-box-youtube { background-color: #C4302B !important; border-radius: .1em; color: #fefffe !important; width: 1.2857142857142858em; text-align: center; padding-top: .15em !important; padding-bottom: .15em !important; line-height: 1em !important; } .fa-box-pinterest { background-color: #c40028 !important; border-radius: .1em; color: #fefffe !important; width: 1.2857142857142858em; text-align: center; padding-top: .15em !important; padding-bottom: .15em !important; line-height: 1em !important; } .fa-box-skype { background-color: #12A5F4 !important; border-radius: .1em; color: #fefffe !important; width: 1.2857142857142858em; text-align: center; padding-top: .15em !important; padding-bottom: .15em !important; line-height: 1em !important; } .fa-box-dropbox { background-color: #007ee5 !important; border-radius: .1em; color: #fefffe !important; width: 1.2857142857142858em; text-align: center; padding-top: .15em !important; padding-bottom: .15em !important; line-height: 1em !important; } .fa-box-soundcloud { background-color: #ff3a00 !important; border-radius: .1em; color: #fefffe !important; width: 1.2857142857142858em; text-align: center; padding-top: .15em !important; padding-bottom: .15em !important; line-height: 1em !important; } .fa-box-dribbble { background-color: #ea4c89 !important; border-radius: .1em; color: #fefffe !important; width: 1.2857142857142858em; text-align: center; padding-top: .15em !important; padding-bottom: .15em !important; line-height: 1em !important; } /* @end */ /* @group INLINE text ( Inline, Inline Table and inline block) */ .fa-inline { display: inline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; } .fa-inline h6, .fa-inline h5, .fa-inline h4, .fa-inline h3, .fa-inline h2, .fa-inline h1, .fa-inline .font-1, .fa-inline .font-2, .fa-inline .font-3, .fa-inline .font-4, .fa-inline .fotn-5, .fa-inline .font-6, .fa-inline .font-7, .fa-inline .font-8, .fa-inline .font-9, .fa-inline .font-10, .fa-inline .font-11, .fa-inline .font-12, .fa-inline .font-13, .fa-inline .font-14, .fa-inline .font-15, .fa-inline .font-16, .fa-inline .font-17, .fa-inline .font-18, .fa-inline .font-19, .fa-inline .font-20 { display: inline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0;} /* vertical-align: top; */ .fa-inline-table {display: inline-table; vertical-align: top; margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } .fa-inline-table h6, .fa-inline-table h5, .fa-inline-table h4, .fa-inline-table h3, .fa-inline-table h2, .fa-inline-table h1, .fa-inline-table .font-1, .fa-inline-table .font-2, .fa-inline-table .font-3, .fa-inline-table .font-4, .fa-inline-table .fotn-5, .fa-inline-table .font-6, .fa-inline-table .font-7, .fa-inline-table .font-8, .fa-inline-table .font-9, .fa-inline-table .font-10, .fa-inline-table .font-11, .fa-inline-table .font-12, .fa-inline-table .font-13, .fa-inline-table .font-14, .fa-inline-table .font-15, .fa-inline-table .font-16, .fa-inline-table .font-17, .fa-inline-table .font-18, .fa-inline-table .font-19, .fa-inline-table .font-20 { display: inline-table; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0;} /* vertical-align: top; */ .fa-inline-block { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0;} .fa-inline-block h6, .fa-inline-block h5, .fa-inline-block h4, .fa-inline-block h3, .fa-inline-block h2, .fa-inline-block h1, .fa-inline-block .font-1, .fa-inline-block .font-2, .fa-inline-block .font-3, .fa-inline-block .font-4, .fa-inline-block .fotn-5, .fa-inline-block .font-6, .fa-inline-block .font-7, .fa-inline-block .font-8, .fa-inline-block .font-9, .fa-inline-block .font-10, .fa-inline-block .font-11, .fa-inline-block .font-12, .fa-inline-block .font-13, .fa-inline-block .font-14, .fa-inline-block .font-15, .fa-inline-block .font-16, .fa-inline-block .font-17, .fa-inline-block .font-18, .fa-inline-block .font-19, .fa-inline-block .font-20 { display: inline-block; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0;} /* vertical-align: top; */ /* @end */ /* @group STYLES SILVER - For TEXT and ICONS ONLY */ /* ------ icon - silver CSS3 ------- */ .fa-silver-light { background: -webkit-linear-gradient(#fefffe, #858585); background: -o-linear-gradient(transparent, transparent);/* remove gradient in OPERA */ -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: #dadbda; text-shadow: none !important; filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#fefffe', EndColorStr='#858585', GradientType=0); /* MSIE */ } .fa-silver-light-inverse { background: -webkit-linear-gradient(#858585, #fefffe); background: -o-linear-gradient(transparent, transparent);/* remove gradient in OPERA */ -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: #dadbda; text-shadow: none !important; filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#858585', EndColorStr='#fefffe', GradientType=0); /* MSIE */ } .fa-silver { background: -webkit-linear-gradient(#a6a6a6, #5e5e5e); background: -o-linear-gradient(transparent, transparent);/* remove gradient in OPERA */ -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: #828282; text-shadow: none !important; filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#a6a6a6', EndColorStr='#5e5e5e', GradientType=0); /* MSIE */ } .fa-silver-inverse { background: -webkit-linear-gradient(#5e5e5e, #a6a6a6); background: -o-linear-gradient(transparent, transparent);/* remove gradient in OPERA */ -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: #828282; text-shadow: none !important; filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#5e5e5e', EndColorStr='#a6a6a6', GradientType=0);/* MSIE */ } .fa-silver-dark, .fa-silver-dark q { background: -webkit-linear-gradient(#434343, #2d2d2d) !important; background: -o-linear-gradient(transparent, transparent);/* remove gradient in OPERA */ -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; color: #393939 !important; text-shadow: none !important; filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#434343', EndColorStr='#2d2d2d', GradientType=0); /* MSIE */ } .fa-silver-dark-inverse{ background: -webkit-linear-gradient(#2d2d2d, #434343); background: -o-linear-gradient(transparent, transparent);/* remove gradient in OPERA */ -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: #393939; text-shadow: none !important; filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#2d2d2d', EndColorStr='#434343', GradientType=0); /* MSIE */ } /* @end */ /* @group STYLES GLOW - For TEXT and ICONS ONLY */ /* ------ GLOW FAMILY ------- */ /* ------ GLOW FIX ------- */ .fa-glow-black { color: #000 !important; text-shadow: #000 0 -2px 15px; filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=8); /* FOR IE8/9 */ -webkit-filter: blur(3px); /* visible in modern browsers only */ } .fa-glow-white { color: #fefffe !important; text-shadow: #fefffe 0 -2px 15px; filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=8); /* FOR IE8/9 */ -webkit-filter: blur(3px);/* visible in modern browsers only */ } /* ------ GLOW FIX ------- */ /* ------ GLOW - IN - ANIMATED ------- */ .fa-glow-black-in { color: #000 !important; text-shadow: #000 0 -2px 15px; filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=8); /* FOR IE8/9 */ -webkit-filter: blur(3px); /* modern browsers only */ -webkit-animation: glow-black-in 1.8s ease-out both !important; animation: glow-black-in 1.8s ease-out both !important; } @keyframes glow-black-in{ 0% {text-shadow: #2b2b2b 0 0px 0px;}/* modern browsers only */ 30% {text-shadow: #2b2b2b 0 0px 0px;} 100% {text-shadow: #000 0 -2px 15px;} } @-webkit-keyframes glow-black-in{ 0% {text-shadow: #2b2b2b 0 0px 0px; -webkit-filter: blur(0px); } 30% {text-shadow: #2b2b2b 0 0px 0px; -webkit-filter: blur(0px); } 100% {text-shadow: #000 0 -2px 15px; -webkit-filter: blur(3px); } } .fa-glow-white-in { color: #fefffe !important; text-shadow: #fefffe 0 -2px 15px; filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=8); /* FOR IE8/9 */ -webkit-filter: blur(3px); /* modern browsers only */ -webkit-animation: glow-white-in 1.8s ease-out both !important; animation: glow-white-in 1.8s ease-out both !important; } @keyframes glow-white-in { /* modern browsers only */ 0% {text-shadow: #efefef 0 0px 0px;} 30% {text-shadow: #efefef 0 0px 0px;} 100% {text-shadow: #fefffe 0 -2px 15px;} } @-webkit-keyframes glow-white-in { 0% {text-shadow: #efefef 0 0px 0px; -webkit-filter: blur(0px);} 30% {text-shadow: #efefef 0 0px 0px; -webkit-filter: blur(0px);} 100% {text-shadow: #fefffe 0 -2px 15px; -webkit-filter: blur(3px);} } /* ------ GLOW - IN - ANIMATED ------- */ /* ------ GLOW - OUT - ANIMATED ------- */ .fa-glow-black-out { color: #000 !important; text-shadow: #000 0 0px 0px; /* modern browsers only */ filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=0); /* FOR IE8/9 */ -webkit-filter: blur(0px); /* modern browsers only */ -webkit-animation: glow-black-out 2.2s ease-in both !important; animation: glow-black-out 2.2s ease-in both !important; } @keyframes glow-black-out{ 0% {text-shadow: #000 0 -1px 15px; } 30% {text-shadow: #000 0 -1px 15px;} 100% {text-shadow: #000 0 0px 0px;} } @-webkit-keyframes glow-black-out{ 0% {text-shadow: #000 0 -1px 15px; -webkit-filter: blur(3px);} 30% {text-shadow: #000 0 -1px 15px; -webkit-filter: blur(3px);} 100% {text-shadow: #000 0 0px 0px; -webkit-filter: blur(0px);} } .fa-glow-white-out { color: #fefffe !important; text-shadow: #efefef 0 0px 0px; -webkit-filter: blur(0px); /* modern browsers only */ -webkit-animation: glow-white-out 2.2s ease-in both !important; animation: glow-white-out 2.2s ease-in both !important; } @keyframes glow-white-out { 0% {text-shadow: #fefffe 0 1px 15px; -webkit-filter: blur(3px); } 30% {text-shadow: #fefffe 0 1px 15px; -webkit-filter: blur(3px); } 100% {text-shadow: #efefef 0 0px 0px; -webkit-filter: blur(0px); } } @-webkit-keyframes glow-white-out { 0% {text-shadow: #fefffe 0 1px 15px; -webkit-filter: blur(3px); } 30% {text-shadow: #fefffe 0 1px 15px; -webkit-filter: blur(3px); } 100% {text-shadow: #efefef 0 0px 0px; -webkit-filter: blur(0px); } } /* ------ GLOW FAMILY ------- */ /* @end */ /* @group STYLES SHADOW - For TEXT and ICONS ONLY */ /* shadow-bottom is a BETA STYLE IN DEVELOPMENT: READ BEFORE USE: This stile require an image because the shadow behavior is different between browsers. Moreover Firefox don't support the blur. Use this style with caution and check the result on your selected browsers. */ /* --start beta style -- */ .fa-shadow-bottom {position: relative;} .fa-shadow-bottom:after { content: " "; height: 3px; position: absolute; width: 90%; left: 0; right: 0; text-shadow: #0c0c0c 0 0 8px;/* remove COLOR in OPERA */ -webkit-background-clip: text; /* ERASE AFTER CONTENT */ -webkit-text-fill-color: transparent; /* ERASE AFTER CONTENT */ /* filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=30) !important; */ -webkit-filter: blur(3px); box-shadow: 0px 0px 13px 0px #000 ; -webkit-box-shadow: 0px 0px 13px 0px #000 ; -moz-box-shadow: 0px 0px 13px 0px #000 ; border-radius:9px; -webkit-border-radius:9px; -moz-border-radius:9px; background: transparent url(css/webfonts/fontawesome/shadow_tile_2.png) repeat center center; padding-bottom: 0; margin-right: auto; margin-left: auto; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter: alpha(opacity=40); opacity: 0.48; margin-top: 1.1em; overflow: visible; } /* ------ icon shadow ------- */ .fa-shadow-white-thin {text-shadow: #dcdcdc 0 1px 2px; filter:progid:DXImageTransform.Microsoft.Shadow(color='white', Direction=180, Strength=2);} /* OLD IE */ .fa-shadow-white {text-shadow: #dcdcdc 0 2px 3px; filter:progid:DXImageTransform.Microsoft.Shadow(color='white', Direction=180, Strength=3);} .fa-shadow-white-big {text-shadow: #dcdcdc 0 3px 5px; filter:progid:DXImageTransform.Microsoft.Shadow(color='white', Direction=180, Strength=4);} .fa-shadow-black-thin {text-shadow: #2b2b2b 0 1px 2px; filter:progid:DXImageTransform.Microsoft.Shadow(color='black', Direction=180, Strength=2);} .fa-shadow-black {text-shadow: #2b2b2b 0 2px 3px; filter:progid:DXImageTransform.Microsoft.Shadow(color='black', Direction=180, Strength=3);} .fa-shadow-black-big {text-shadow: #2b2b2b 0 3px 6px; filter:progid:DXImageTransform.Microsoft.Shadow(color='black', Direction=180, Strength=4);} /* @end */ /* @group TRANSFORM SLIP */ /* ----- SLIP DOWN------ */ .fa-slip { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; margin-right: auto; margin-left: auto; -webkit-transform: translateZ(0px); -webkit-transform-style: preserve-3d; padding-right: 1px; padding-left: 1px; opacity: 1; -webkit-animation: slip 1.3s ease-in both !important; animation: slip 1.3s ease-in both !important; } @-webkit-keyframes slip { 0% {-webkit-transform: perspective(200px)rotateX(90deg) translateY(-50%); opacity: 0;} 70% {-webkit-transform: perspective(500px)rotateX(0deg) translateY(0px); opacity: 1;} 100% {-webkit-transform: perspective(600px) rotateX(0deg) translateY(0px); opacity: 1;} } @keyframes slip { 0% {opacity: 0; transform: perspective(200px) rotateX(90deg) rotateY(0deg) translateY(-50%);} 70% {opacity: 1; transform: perspective(500px) rotateX(0deg) rotateY(0deg) translateY(0px);} 100% {opacity: 1; transform: perspective(600px) rotateX(0deg) rotateY(0deg) translateY(0px);} } /* @end */ /* @group TRANSFORM FLIP*/ /* -------flip HORIZONTAL "Y" 200------ */ .fa-flip-horizontal-200 { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -ms-animation: flip-y-200 2s ease-in both !important; margin-right: auto; margin-left: auto; padding-right: 1px; padding-left: 1px; opacity: 1; -webkit-transform: translateZ(0px); -webkit-transform-style: preserve-3d; -webkit-animation: flip-y-200 2s ease-in both !important; animation: flip-y-200 2s ease-in both !important; } @-webkit-keyframes flip-y-200 { 0% {-webkit-transform: perspective(3000px) rotateY(90deg); opacity: 0;} 30% {opacity: 0;} 100% {-webkit-transform: perspective(3000px) rotateY(0deg); opacity: 1;} } @keyframes flip-y-200 { 0% {opacity: 0;transform: perspective(3000px) rotateX(0deg) rotateY(90deg);} 30% {opacity: 0; } 100% { opacity: 1; -webkit-transform: perspective(2600px) rotateX(0deg) rotateY(0deg); } /*100% { opacity: 1; -webkit-transform: perspective(1600px) rotateX(0deg) rotateY(0deg); }*/ } /* -------flip HORIZONTAL "Y" 150------ */ .fa-flip-horizontal-150 { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; padding-right: 1px; padding-left: 1px; margin-right: auto; margin-left: auto; opacity: 1; -webkit-transform: translateZ(0px); -webkit-transform-style: preserve-3d; -webkit-animation: flip-y-150 1.5s ease-in both !important; animation: flip-y-150 1.5s ease-in both !important; } @-webkit-keyframes flip-y-150 { 0% {-webkit-transform: perspective(3000px) rotateY(90deg); opacity: 0;} 30% {opacity: 0;} 100% {-webkit-transform: perspective(3000px) rotateY(0deg); opacity: 1;} } @keyframes flip-y-150 { 0% { opacity: 0; transform: perspective(3000px) rotateX(0deg) rotateY(90deg);} 30% { opacity: 0;} 100% { opacity: 1; transform: perspective(3000px) rotateX(0deg) rotateY(0deg);} } /* -------flip HORIZONTAL "Y" 100------ */ .fa-flip-horizontal-100 { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; padding-right: 1px; padding-left: 1px; margin-right: auto; margin-left: auto; opacity: 1; -webkit-transform: translateZ(0px); -webkit-transform-style: preserve-3d; -webkit-animation: flip-y-100 1s ease-in both !important; animation: flip-y-100 1s ease-in both !important; } @-webkit-keyframes flip-y-100 { 0% {-webkit-transform: perspective(3000px)rotateY(90deg); opacity: 0;} 30% {opacity: 0;} 100% {-webkit-transform: perspective(3000px) rotateY(0deg); opacity: 1;} } @keyframes flip-y-100 { 0% {opacity: 0; transform: perspective(3000px) rotateX(0deg) rotateY(90deg);} 30% {opacity: 0;} 100% {opacity: 1; transform: perspective(3000px) rotateX(0deg) rotateY(0deg);} } /* -------flip HORIZONTAL "Y" 50------ */ .fa-flip-horizontal-50 { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; padding-right: 1px; padding-left: 1px; margin-right: auto; margin-left: auto; opacity: 1; -webkit-transform: translateZ(0px); -webkit-transform-style: preserve-3d; -webkit-animation: flip-y-50 0.5s ease-in both !important; animation: flip-y-50 0.5s ease-in both !important; } @-webkit-keyframes flip-y-50 { 0% {-webkit-transform: perspective(3000px)rotateY(90deg); opacity: 0;} 30% {opacity: 0;} 100% {-webkit-transform: perspective(3000px) rotateY(0deg); opacity: 1;} } @keyframes flip-y-50 { 0% {opacity: 0; transform: perspective(3000px) rotateX(0deg) rotateY(90deg);} 30% { opacity: 0;} 100% { opacity: 1; transform: perspective(3000px) rotateX(0deg) rotateY(0deg);} } /* -------flip VERTICAL "X" 200------ */ .fa-flip-vertical-200 { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; margin-right: auto; margin-left: auto; opacity: 1; -webkit-transform: translateZ(0px); -webkit-transform-style: preserve-3d; -webkit-animation: flip-x-200 2s ease-in both !important; animation: flip-x-200 2s ease-in both !important; } @-webkit-keyframes flip-x-200 { 0% {-webkit-transform: perspective(600px)rotateX(90deg); opacity: 0;} 30% {opacity: 0;} 100% {-webkit-transform: perspective(600px) rotateX(0deg); opacity: 1;} } @keyframes flip-x-200 { 0% { opacity: 0; transform: perspective(600px) rotateX(90deg) rotateY(0deg);} 30% {opacity: 0;} 100% {opacity: 1; transform: perspective(600px) rotateX(0deg) rotateY(0deg);} } /* -------flip VERTICAL "X" 150------ */ .fa-flip-vertical-150 { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; margin-right: auto; margin-left: auto; opacity: 1; -webkit-transform: translateZ(0px); -webkit-transform-style: preserve-3d; -webkit-animation: flip-x-150 1.5s ease-in both !important; animation: flip-x-150 1.5s ease-in both !important; } @-webkit-keyframes flip-x-150 { 0% {-webkit-transform: perspective(600px)rotateX(90deg); opacity: 0;} 27% {opacity: 0;} 100% {-webkit-transform: perspective(600px) rotateX(0deg); opacity: 1;} } @keyframes flip-x-150 { 0% {opacity: 0; transform: perspective(600px) rotateX(90deg) rotateY(0deg);} 27% {opacity: 0;} 100% {opacity: 1; transform: perspective(600px) rotateX(0deg) rotateY(0deg);} } /* -------flip VERTICAL "X" 100------ */ .fa-flip-vertical-100 { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; margin-right: auto; margin-left: auto; opacity: 1; -webkit-transform: translateZ(0px); -webkit-transform-style: preserve-3d; -webkit-animation: flip-x-100 1s ease-in both !important; animation: flip-x-100 1s ease-in both !important; } @-webkit-keyframes flip-x-100 { 0% {-webkit-transform: perspective(600px)rotateX(90deg); opacity: 0;} 25% {opacity: 0;} 100% {-webkit-transform: perspective(600px) rotateX(0deg); opacity: 1;} } @keyframes flip-x-100 { 0% {opacity: 0; transform: perspective(600px) rotateX(90deg) rotateY(0deg); } 25% {opacity: 0;} 100% {opacity: 1; transform: perspective(600px) rotateX(0deg) rotateY(0deg);} } /* -------flip VERTICAL "X" 50------ */ .fa-flip-vertical-50 { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; margin-right: auto; margin-left: auto; opacity: 1; -webkit-transform: translateZ(0px); -webkit-transform-style: preserve-3d; -webkit-animation: flip-x-50 0.5s ease-in both !important; animation: flip-x-50 0.5s ease-in both !important; } @-webkit-keyframes flip-x-50 { 0% {-webkit-transform: perspective(600px)rotateX(90deg); opacity: 0;} 10% {opacity: 0;} 100% {-webkit-transform: perspective(600px) rotateX(0deg); opacity: 1;} } @keyframes flip-x-50 {0% {opacity: 0; transform: perspective(600px) rotateX(90deg) rotateY(0deg);} 10% {opacity: 0;} 100% {opacity: 1; transform: perspective(600px) rotateX(0deg) rotateY(0deg);} } /* @end */ /* @group TRANSFORM SLIDE */ /* ------ SLIDE UP ------- */ .fa-slide-up { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-animation: slide-up 1.6s ease-out both !important; animation: slide-up 1.6s ease-out both !important; -webkit-animation-delay: 0.35s; animation-delay: 0.35s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes slide-up { 0%{ opacity:0; transform: translateY(-50px); } 45%{ transform: translateY(-50px); } 75%{ opacity:0; } 100%{ opacity:1; transform: translateY(0px); } } @-webkit-keyframes slide-up { 0%{ opacity:0; -webkit-transform: translateY(-50px); } 45%{ -webkit-transform: translateY(-50px); } 75%{ opacity:0; } 100%{ opacity:1; -webkit-transform: translateY(0px); } } /* ------ SLIDE DOWN ------- */ .fa-slide-down { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-animation: slide-down 1.6s ease-out both !important; animation: slide-down 1.6s ease-out both !important; -webkit-animation-delay: 0.35s; animation-delay: 0.35s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes slide-down { 0%{ opacity:0; transform: translateY(50px); } 45%{ transform: translateY(50px); } 75%{ opacity:0; } 100%{ opacity:1; transform: translateY(0px); } } @-webkit-keyframes slide-down { 0%{ opacity:0; -webkit-transform: translateY(50px); } 45%{ -webkit-transform: translateY(50px); } 75%{ opacity:0;} 100%{ opacity:1; -webkit-transform: translateY(0px); } } /* ------ SLIDE LEFT ------- */ .fa-slide-left { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-animation: slide-left 1.6s ease-out both !important; animation: slide-left 1.6s ease-out both !important; -webkit-animation-delay: 0.35s; animation-delay: 0.35s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes slide-left { 0%{opacity:0; transform:translateX(-50px);} 45%{ transform: translateX(-50px); } 75%{ opacity:0; } 100%{ opacity:1; transform: translateX(0px); } } @-webkit-keyframes slide-left { 0%{ opacity:0; -webkit-transform: translateX(-50px); } 45%{ -webkit-transform: translateX(-50px); } 75%{ opacity:0; } 100%{ opacity:1; -webkit-transform: translateX(0px); } } /* ------ SLIDE RIGHT ------- */ .fa-slide-right { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-animation: slide-right 1.6s ease-out both !important; animation: slide-right 1.6s ease-out both !important; -webkit-animation-delay: 0.35s; animation-delay: 0.35s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes slide-right { 0%{ opacity:0; transform: translateX(50px); } 45%{ transform: translateX(50px); } 75%{ opacity:0; } 100%{ opacity:1; transform: translateX(0px); } } @-webkit-keyframes slide-right { 0%{ opacity:0; -webkit-transform: translateX(50px); } 45%{ -webkit-transform: translateX(50px); } 75%{ opacity:0; } 100%{ opacity:1; -webkit-transform: translateX(0px); } } /* @end */ /* @group TRANSFORM FADE IN */ /* ------ fade-250 ------- */ .fa-fade-250 { -webkit-animation: fade-250 2.5s ease-in both !important; animation: fade-250 2.5s ease-in both !important; } @-webkit-keyframes fade-250 { 0% {opacity: 0;} 35% {opacity: 0;} 100% {opacity: 1;} } @keyframes fade-250 { 0% {opacity: 0;} 35% {opacity: 0;} 100% {opacity: 1;} } /* ------ fade-200 ------- */ .fa-fade-200 { -webkit-animation: fade-200 2s ease-in both !important; animation: fade-200 2s ease-in both !important; } @-webkit-keyframes fade-200 { 0% {opacity: 0;} 35% {opacity: 0;} 100% {opacity: 1;} } @keyframes fade-200 { 0% {opacity: 0;} 35% {opacity: 0;} 100% {opacity: 1;} } /* ------ fade-150 ------- */ .fa-fade-150 { -webkit-animation: fade-150 1.5s ease-in both !important; animation: fade-150 1.5s ease-in both !important; } @-webkit-keyframes fade-150 { 0% {opacity: 0;} 35% {opacity: 0;} 100% {opacity: 1;} } @keyframes fade-150 { 0% {opacity: 0;} 35% {opacity: 0;} 100% {opacity: 1;} } /* ------ fade-100 ------- */ .fa-fade-100 { -webkit-animation: fade-100 1s ease-in both !important; animation: fade-100 1s ease-in both !important; } @-webkit-keyframes fade-100 { 0% {opacity: 0;} 35% {opacity: 0;} 100% {opacity: 1;} } @keyframes fade-100 { 0% {opacity: 0;} 35% {opacity: 0;} 100% {opacity: 1;} } /* ------ fade-75 ------- */ .fa-fade-75 { -webkit-animation: fade-75 0.75s ease-in both !important; animation: fade-75 0.75s ease-in both !important; } @-webkit-keyframes fade-75 { 0% {opacity: 0;} 35% {opacity: 0;} 100% {opacity: 1;} } @keyframes fade-75 { 0% {opacity: 0;} 35% {opacity: 0;} 100% {opacity: 1;} } /* ------ fade-50 ------- */ .fa-fade-50 { -webkit-animation: fade-50 0.50s ease-in both !important; animation: fade-50 0.50s ease-in both !important; } @-webkit-keyframes fade-50 { 0% {opacity: 0;} 35% {opacity: 0;} 100% {opacity: 1;} } @keyframes fade-50 { 0% {opacity: 0;} 35% {opacity: 0;} 100% {opacity: 1;} } /* @end */ /* @group TRANSFORM BEAT */ /* ------ beat ------- */ .fa-beat { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-animation: beat 1.6s linear both !important; animation: beat 1.6s linear both !important; -webkit-transform: translateZ(0px); -webkit-transform-style: preserve-3d; padding: 1px; overflow: visible; } @keyframes beat { 0% {transform: scale(1);} 62% {transform: scale(1);} 77% {transform: scale(0.8);} 100% {transform: scale(1);} } @-webkit-keyframes beat { 0% {-webkit-transform: scale(1); } 62% {-webkit-transform: scale(1);} 77% {-webkit-transform: scale(0.8);} 100% {-webkit-transform: scale(1);} } /* ------ icon - beat ------- */ /* @end */ /* @group TRANSFORM BEAT - FAST */ .fa-beat-fast { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-animation: beat-fast 0.4s linear both !important; animation: beat-fast 0.4s linear both !important; -webkit-transform: translateZ(0px); -webkit-transform-style: preserve-3d; padding: 1px; overflow: visible; } @keyframes beat-fast { 0% {transform: scale(1);} 20% {transform: scale(0.8);} 100% {transform: scale(1);} } @-webkit-keyframes beat-fast { 0% {-webkit-transform: scale(1);} 20% {-webkit-transform: scale(0.8);} 100% {-webkit-transform: scale(1);} } /* ------ icon - beat fast ------- */ /* @end */ /* @group TRANSFORM SCALE */ /* ------ icon - zoom ------- */ .fa-scale{ display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-transform: translateZ(0px); -webkit-transform-style: preserve-3d; opacity: 1; padding: 1px; overflow: visible; -webkit-animation: scale 1.4s ease-out both !important; animation: scale 1.4s ease-out both !important; } @keyframes scale { 0% {transform: scale(0); opacity: 0;} 30% {transform: scale(0);} 50% {opacity: 0;} 100% {transform: scale(1); opacity: 1;} } @-webkit-keyframes scale { 0% {-webkit-transform: scale(0); opacity: 0; transform: scale(0); opacity: 0;} 30% {-webkit-transform: scale(0); transform: scale(0);} 50% {opacity: 0;} 100% {-webkit-transform: scale(1); opacity: 1; transform: scale(1);} } /* ---- end ----- */ .fa-scale-inverse { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; opacity: 1; -webkit-transform: translateZ(0px); -webkit-transform-style: preserve-3d; padding: 1px; overflow: visible; -webkit-animation: scale-inverse 1.4s ease-out both !important; animation: scale-inverse 1.4s ease-out both !important; } @keyframes scale-inverse { 0% {transform: scale(1.3); opacity: 0;} 30% {transform: scale(1.3);} 50% {opacity: 0;} 100% {transform: scale(1); opacity: 1;} } @-webkit-keyframes scale-inverse { 0% {-webkit-transform: scale(1.3); opacity: 0; transform: scale(1.3);} 30% {-webkit-transform: scale (1.3); transform: scale(1.3); opacity: 0;} 50% {opacity: 0;} 100% {-webkit-transform: scale (1); opacity: 1; transform: scale(1);} } /* @end */ /* @group TRANSFORM ROTATION */ /* ------ SPIN ROTATE 360 ------- */ .fa-spin-360 { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-transform: translateZ(0px); -webkit-transform-style: preserve-3d; padding: 1px; overflow: visible; -webkit-animation: spin-360 1.9s ease-out both !important; animation: spin-360 1.9s ease-out both !important; } @-webkit-keyframes spin-360 { 0% {-webkit-transform: rotate(359deg);} 100%{-webkit-transform: rotate(0deg);} } @keyframes spin-360 { 0% {transform: rotate(359deg);} 100% {transform: rotate(0deg);} } /* ------ SPIN ROTATE 180 ------- */ .fa-spin-180 { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-transform: translateZ(0px); -webkit-transform-style: preserve-3d; padding: 1px; overflow: visible; -webkit-animation: spin-180 1.9s ease-out both !important; animation: spin-180 1.9s ease-out both !important; } @-webkit-keyframes spin-180 { 0% {-webkit-transform: rotate(180deg);} 100% {-webkit-transform: rotate(0deg);} } @keyframes spin-180 { 0% {transform: rotate(180deg);} 100% {transform: rotate(0deg);} } /* ------ SPIN ROTATE 90 ------- */ .fa-spin-90 { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-transform: translateZ(0px); -webkit-transform-style: preserve-3d; padding: 1px; overflow: visible; -webkit-animation: spin-90 1.9s ease-out both !important; animation: spin-90 1.9s ease-out both !important; } @-webkit-keyframes spin-90 { 0% {-webkit-transform: rotate(90deg);} 100% {-webkit-transform: rotate(0deg);} } @keyframes spin-90 { 0% {transform: rotate(90deg);} 100% {transform: rotate(0deg);} } /* ------ SPIN ROTATE 80 ------- */ .fa-spin-80 { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-transform: translateZ(0px); -webkit-transform-style: preserve-3d; padding: 1px; overflow: visible; -webkit-animation: spin-80 1.9s ease-out both !important; animation: spin-80 1.9s ease-out both !important; } @-webkit-keyframes spin-80 { 0% {-webkit-transform: rotate(80deg);} 100% {-webkit-transform: rotate(0deg);} } @keyframes spin-80 { 0% {transform: rotate(80deg);} 100% {transform: rotate(0deg);} } /* ------ SPIN ROTATE 70 ------- */ .fa-spin-70 { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-transform: translateZ(0px); -webkit-transform-style: preserve-3d; padding: 1px; overflow: visible; -webkit-animation: spin-70 1.9s ease-out both !important; animation: spin-70 1.9s ease-out both !important; } @-webkit-keyframes spin-70 { 0% {-webkit-transform: rotate(80deg);} 100% {-webkit-transform: rotate(0deg);} } @keyframes spin-70 { 0% {transform: rotate(80deg);} 100% {transform: rotate(0deg);} } /* ------ SPIN ROTATE 60 ------- */ .fa-spin-70 { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-transform: translateZ(0px); -webkit-transform-style: preserve-3d; padding: 1px; overflow: visible; -webkit-animation: spin-70 1.9s ease-out both !important; animation: spin-70 1.9s ease-out both !important; } @-webkit-keyframes spin-70 { 0% {-webkit-transform: rotate(80deg);} 100% {-webkit-transform: rotate(0deg);} } @keyframes spin-70 { 0% {transform: rotate(80deg);} 100% {transform: rotate(0deg);} } /* ------ SPIN ROTATE 50 ------- */ .fa-spin-50 { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-transform: translateZ(0px); -webkit-transform-style: preserve-3d; padding: 1px; overflow: visible; -webkit-animation: spin-50 1.9s ease-out both !important; animation: spin-50 1.9s ease-out both !important; } @-webkit-keyframes spin-50 { 0% {-webkit-transform: rotate(80deg);} 100% {-webkit-transform: rotate(0deg);} } @keyframes spin-50 { 0% {transform: rotate(80deg);} 100% {transform: rotate(0deg);} } /* ------ SPIN ROTATE 45 ------- */ .fa-spin-45 { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-transform: translateZ(0px); -webkit-transform-style: preserve-3d; padding: 1px; overflow: visible; -webkit-animation: spin-45 1.9s ease-out both !important; animation: spin-45 1.9s ease-out both !important; } @-webkit-keyframes spin-45 { 0% {-webkit-transform: rotate(80deg);} 100% {-webkit-transform: rotate(0deg);} } @keyframes spin-45 { 0% {transform: rotate(80deg);} 100% {transform: rotate(0deg);} } /* ------ SPIN ROTATE 40 ------- */ .fa-spin-40 { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-transform: translateZ(0px); -webkit-transform-style: preserve-3d; padding: 1px; overflow: visible; -webkit-animation: spin-40 1.9s ease-out both !important; animation: spin-40 1.9s ease-out both !important; } @-webkit-keyframes spin-40 { 0% {-webkit-transform: rotate(80deg);} 100% {-webkit-transform: rotate(0deg);} } @keyframes spin-40 { 0% {transform: rotate(80deg);} 100% {transform: rotate(0deg);} } /* ------ SPIN ROTATE 30 ------- */ .fa-spin-30 { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-transform: translateZ(0px); -webkit-transform-style: preserve-3d; padding: 1px; overflow: visible; -webkit-animation: spin-30 1.9s ease-out both !important; animation: spin-30 1.9s ease-out both !important; } @-webkit-keyframes spin-30 { 0% {-webkit-transform: rotate(80deg);} 100% {-webkit-transform: rotate(0deg);} } @keyframes spin-30 { 0% {transform: rotate(80deg);} 100% {transform: rotate(0deg);} } /* ------ SPIN ROTATE 20 ------- */ .fa-spin-20 { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-transform: translateZ(0px); -webkit-transform-style: preserve-3d; padding: 1px; overflow: visible; -webkit-animation: spin-20 1.9s ease-out both !important; animation: spin-20 1.9s ease-out both !important; } @-webkit-keyframes spin-20 { 0% {-webkit-transform: rotate(80deg);} 100% {-webkit-transform: rotate(0deg);} } @keyframes spin-20 { 0% {transform: rotate(80deg);} 100% {transform: rotate(0deg);} } /* ------ SPIN ROTATE 10 ------- */ .fa-spin-10 { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-transform: translateZ(0px); -webkit-transform-style: preserve-3d; padding: 1px; overflow: visible; -webkit-animation: spin-10 1.9s ease-out both !important; animation: spin-10 1.9s ease-out both !important; } @-webkit-keyframes spin-10 { 0% {-webkit-transform: rotate(80deg);} 100% {-webkit-transform: rotate(0deg);} } @keyframes spin-10 { 0% {transform: rotate(80deg);} 100% {transform: rotate(0deg);} } /* @end */ /* @group TRANSFORM ROCK */ /* ------ ROCK ------- */ .fa-rock { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; opacity: 1; -webkit-transform: translateZ(0px); -webkit-transform-style: preserve-3d; overflow: visible; padding: 1px; -webkit-animation: rock 1.7s ease-in-out both !important; animation: rock 1.7s ease-in-out both !important; } @-webkit-keyframes rock { 0% {opacity: 0; -webkit-transform: rotate(-30deg);} 51% {opacity: 0; -webkit-transform:rotate(-30deg);} 70% {opacity: 1; -webkit-transform: rotate(8deg);} 100% { -webkit-transform: rotate(0deg);} } @keyframes rock { 0% {opacity: 0; transform: rotate(-30deg);} 51% {opacity: 1; transform:rotate(-30deg);} 70% {transform: rotate(8deg);} 100% {transform: rotate(0deg);} } /* ---- end ----- */ /* @end */ /* @group TRANSFORM DANGLES */ /* ------ dangles ------- */ .fa-dangles { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; overflow: visible; -webkit-animation: dangles 1.3s ease-out both !important; animation: dangles 1.3s ease-out both !important; } @-webkit-keyframes dangles { 0% {-webkit-transform: rotate(-61deg);} 25% {-webkit-transform: rotate(20deg);} 50% {-webkit-transform: rotate(-21deg);} 75% {-webkit-transform: rotate(13deg);} 100% {-webkit-transform: rotate(0deg);} } @keyframes dangles { 0% {transform: rotate(-61deg);} 25% {transform: rotate(20deg);} 50% {transform: rotate(-21deg);} 75% {transform: rotate(13deg);} 100% {transform: rotate(0deg);} } /* ---- end ----- */ /* @end */ /* @group TRANSFORM PULSE */ /* ------ pulse ------- */ .fa-pulse { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-animation: pulse 2.2s ease-in-out both !important; animation: pulse 2.2s ease-in-out both !important; } @keyframes pulse { 0% { opacity: 1;} 39% {opacity: 1;} 50% {opacity: 0.3;} 72% {opacity: 1;} 87% {opacity: 0.3;} 100% {opacity: 1;} } @-webkit-keyframes pulse { 0% { opacity: 1;} 39% {opacity: 1;} 50% {opacity: 0.3;} 72% {opacity: 1;} 87% {opacity: 0.3;} 100% {opacity: 1;} } /* ------ pulse INFINITE------- */ .fa-pulse-loop { /* infinite lineart; */ display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; /* ------ don't add code to prevent issues in the linnkd with FA------- */ -webkit-animation: pulse-loop 2.9s linear; animation: pulse-loop 2.9s linear; -webkit-animation-iteration-count: 11; animation-iteration-count: 11; } @keyframes pulse-loop { 0% {opacity: 1;} 44% {opacity: 1; } 54% {opacity: 0.55;} 76% {opacity: 1;} 91% {opacity: 0.55;} 100% { opacity: 1;} } @-webkit-keyframes pulse-loop { 0% {opacity: 1;} 44% {opacity: 1; } 54% {opacity: 0.55;} 76% {opacity: 1;} 91% {opacity: 0.55;} 100% { opacity: 1;} } /* ------ pulse INFINITE------- */ /* @end */ /* @group MAX HEIGHT - For TEXT and ICONS ONLY */ /* ------ MAX 300 PIXEL ------- */ .fa-max-300 {font-size: 300px; margin: 0; padding: 0; line-height: 0.9em;} @media only screen and (max-width: 1030px) { /* 300 *//* iPad - kindle - Landscape */ /* 1 */ .fa-max-300 {font-size: 300px !important; }} @media only screen and (max-width: 800px) { /* 275 */ /* iPad - Portrait */ .fa-max-300 {font-size: 280px !important; }} @media only screen and (max-width: 750px) { /* 250 */ .fa-max-300 {font-size: 275px !important; }} @media only screen and (max-width: 700px) { /* 225 */ .fa-max-300 {font-size: 260px !important; }} @media only screen and (max-width: 650px) { /* 200 */ .fa-max-300 {font-size: 240px !important; }} @media only screen and (max-width: 600px) { /* 150 */ /* kindle - Portrait + iPhone - Landscape*/ .fa-max-300 {font-size: 220px !important; }} @media only screen and (max-width: 566px) { /* 125 */ .fa-max-300 {font-size: 190px !important; }} @media only screen and (max-width: 533px) { /* 100 */ .fa-max-300 {font-size: 170px !important; }} @media only screen and (max-width: 500px) { /* 75 */ /* iPhone - Landscape */ .fa-max-300 {font-size: 160px !important; }} @media only screen and (max-width: 400px) { /* 50 */ .fa-max-300 {font-size: 130px !important; }} @media only screen and (max-width: 320px) { /* 50 */ /* iPhone - Portrait + small devices Android - Landscape */ .fa-max-300 {font-size: 120px !important; }} @media only screen and (max-width: 240px) { /* 50 */ /* small devices Android - Portrait */ .fa-max-300 {font-size: 75px !important; }} /* ------ MAX 275 PIXEL ------- */ .fa-max-275 {font-size: 275px !important; line-height: 1em; margin: 0; padding: 0;} @media only screen and (max-width: 1030px) { /* 300 *//* iPad - kindle - Landscape */ /* 1 */ .fa-max-275 {font-size: 275px !important; }} @media only screen and (max-width: 800px) { /* 275 */ /* iPad - Portrait */ .fa-max-275 {font-size: 275px !important; }} @media only screen and (max-width: 750px) { /* 250 */ .fa-max-275 {font-size: 260px !important; }} @media only screen and (max-width: 700px) { /* 225 */ .fa-max-275 {font-size: 250px !important; }} @media only screen and (max-width: 650px) { /* 200 */ .fa-max-275 {font-size: 235px !important; }} @media only screen and (max-width: 600px) { /* 150 */ /* kindle - Portrait + iPhone - Landscape*/ .fa-max-275 {font-size: 200px !important; }} @media only screen and (max-width: 566px) { /* 125 */ .fa-max-275 {font-size: 170px !important; }} @media only screen and (max-width: 533px) { /* 100 */ .fa-max-275 {font-size: 150px !important; }} @media only screen and (max-width: 500px) { /* 75 */ /* iPhone - Landscape */ .fa-max-275 {font-size: 140px !important; }} @media only screen and (max-width: 400px) { /* 50 */ .fa-max-275 {font-size: 125px !important; }} @media only screen and (max-width: 320px) { /* 50 */ /* iPhone - Portrait + small devices Android - Landscape */ .fa-max-275 {font-size: 110px !important; }} @media only screen and (max-width: 240px) { /* 50 */ /* small devices Android - Portrait */ .fa-max-275 {font-size: 70px !important; }} /* ------ MAX 250 PIXEL ------- */ .fa-max-250 {font-size: 250px !important; line-height: 1em; margin: 0; padding: 0;} @media only screen and (max-width: 1030px) { /* 300 *//* iPad - kindle - Landscape */ /* 1 */ .fa-max-250 {font-size: 250px !important; }} @media only screen and (max-width: 800px) { /* 275 */ /* iPad - Portrait */ .fa-max-250 {font-size: 250px !important; }} @media only screen and (max-width: 750px) { /* 250 */ .fa-max-250 {font-size: 235px !important; }} @media only screen and (max-width: 700px) { /* 225 */ .fa-max-250 {font-size: 225px !important; }} @media only screen and (max-width: 650px) { /* 200 */ .fa-max-250 {font-size: 200px !important; }} @media only screen and (max-width: 600px) { /* 150 */ /* kindle - Portrait + iPhone - Landscape*/ .fa-max-250 {font-size: 180px !important; }} @media only screen and (max-width: 566px) { /* 125 */ .fa-max-250 {font-size: 160px !important; }} @media only screen and (max-width: 533px) { /* 100 */ .fa-max-250 {font-size: 140px !important; }} @media only screen and (max-width: 500px) { /* 75 */ /* iPhone - Landscape */ .fa-max-250 {font-size: 130px !important; }} @media only screen and (max-width: 400px) { /* 50 */ /* ------------------------------------------ */ .fa-max-250 {font-size: 110px !important; }} @media only screen and (max-width: 320px) { /* 50 */ /* iPhone - Portrait + small devices Android - Landscape */ .fa-max-250 {font-size: 105px !important; }} @media only screen and (max-width: 240px) { /* 50 */ /* small devices Android - Portrait */ .fa-max-250 {font-size: 65px !important; }} /* ------ MAX 225 PIXEL ------- */ .fa-max-225 {font-size: 225px !important; line-height: 1em; margin: 0; padding: 0;} @media only screen and (max-width: 1030px) { /* 300 *//* iPad - kindle - Landscape */ /* 1 */ .fa-max-225 {font-size: 225px !important; }} @media only screen and (max-width: 800px) { /* 275 */ /* iPad - Portrait */ .fa-max-225 {font-size: 225px !important; }} @media only screen and (max-width: 750px) { /* 250 */ .fa-max-225 {font-size: 225px !important; }} @media only screen and (max-width: 700px) { /* 225 */ .fa-max-225 {font-size: 215px !important; }} @media only screen and (max-width: 650px) { /* 200 */ .fa-max-225 {font-size: 200px !important; }} @media only screen and (max-width: 600px) { /* 150 */ /* kindle - Portrait + iPhone - Landscape*/ .fa-max-225 {font-size: 175px !important; }} @media only screen and (max-width: 566px) { /* 125 */ .fa-max-225 {font-size: 150px !important; }} @media only screen and (max-width: 533px) { /* 100 */ .fa-max-225 {font-size: 135px !important; }} @media only screen and (max-width: 500px) { /* 75 */ /* iPhone - Landscape */ .fa-max-225 {font-size: 120px !important; }} @media only screen and (max-width: 400px) { /* 50 */ /* ------------------------------------------ */ .fa-max-225 {font-size: 105px !important; }} @media only screen and (max-width: 320px) { /* 50 */ /* iPhone - Portrait + small devices Android - Landscape */ .fa-max-225 {font-size: 100px !important; }} @media only screen and (max-width: 240px) { /* 50 */ /* small devices Android - Portrait */ .fa-max-225 {font-size: 60px !important; }} /* ------ MAX 200 PIXEL ------- */ .fa-max-200 {font-size: 200px !important; line-height: 1em; margin: 0; padding: 0;} @media only screen and (max-width: 1030px) { /* 300 *//* iPad - kindle - Landscape */ /* 1 */ .fa-max-200 {font-size: 200px !important; }} @media only screen and (max-width: 800px) { /* 275 */ /* iPad - Portrait */ .fa-max-200 {font-size: 200px !important; }} @media only screen and (max-width: 750px) { /* 250 */ .fa-max-200 {font-size: 200px !important; }} @media only screen and (max-width: 700px) { /* 225 */ .fa-max-200 {font-size: 200px !important; }} @media only screen and (max-width: 650px) { /* 200 */ .fa-max-200 {font-size: 180px !important; }} @media only screen and (max-width: 600px) { /* 150 */ /* kindle - Portrait + iPhone - Landscape*/ .fa-max-200 {font-size: 175px !important; }} @media only screen and (max-width: 566px) { /* 125 */ .fa-max-200 {font-size: 140px !important; }} @media only screen and (max-width: 533px) { /* 100 */ .fa-max-200 {font-size: 125px !important; }} @media only screen and (max-width: 500px) { /* 75 */ /* iPhone - Landscape */ .fa-max-200 {font-size: 110px !important; }} @media only screen and (max-width: 400px) { /* 50 */ /* ------------------------------------------ */ .fa-max-200 {font-size: 100px !important; }} @media only screen and (max-width: 320px) { /* 50 */ /* iPhone - Portrait + small devices Android - Landscape */ .fa-max-200 {font-size: 90px !important; }} @media only screen and (max-width: 240px) { /* 50 */ /* small devices Android - Portrait */ .fa-max-200 {font-size: 55px !important; }} /* ------ MAX 175 PIXEL ------- */ .fa-max-175 {font-size: 175px !important; line-height: 1em; margin: 0; padding: 0;} @media only screen and (max-width: 1030px) { /* 300 *//* iPad - kindle - Landscape */ /* 1 */ .fa-max-175 {font-size: 175px !important; }} @media only screen and (max-width: 800px) { /* 275 */ /* iPad - Portrait */ .fa-max-175 {font-size: 175px !important; }} @media only screen and (max-width: 750px) { /* 250 */ .fa-max-175 {font-size: 175px !important; }} @media only screen and (max-width: 700px) { /* 225 */ .fa-max-175 {font-size: 175px !important; }} @media only screen and (max-width: 650px) { /* 200 */ .fa-max-175 {font-size: 170px !important; }} @media only screen and (max-width: 600px) { /* 150 */ /* kindle - Portrait + iPhone - Landscape*/ .fa-max-175 {font-size: 155px !important; }} @media only screen and (max-width: 566px) { /* 125 */ .fa-max-175 {font-size: 145px !important; }} @media only screen and (max-width: 533px) { /* 100 */ .fa-max-175 {font-size: 120px !important; }} @media only screen and (max-width: 500px) { /* 75 */ /* iPhone - Landscape */ .fa-max-175 {font-size: 95px !important; }} @media only screen and (max-width: 400px) { /* 50 */ /* ------------------------------------------ */ .fa-max-175 {font-size: 90px !important; }} @media only screen and (max-width: 320px) { /* 50 */ /* iPhone - Portrait + small devices Android - Landscape */ .fa-max-175 {font-size: 85px !important; }} @media only screen and (max-width: 240px) { /* 50 */ /* small devices Android - Portrait */ .fa-max-175 {font-size: 50px !important; }} /* ------ MAX 150 PIXEL ------- */ .fa-max-150 {font-size: 150px !important; line-height: 1.1em; margin: 0; padding: 0; } @media only screen and (max-width: 1030px) { /* 300 *//* iPad - kindle - Landscape */ /* 1 */ .fa-max-150 {font-size: 150px !important; }} @media only screen and (max-width: 800px) { /* 275 */ /* iPad - Portrait */ .fa-max-150 {font-size: 150px !important; }} @media only screen and (max-width: 750px) { /* 250 */ .fa-max-150 {font-size: 150px !important; }} @media only screen and (max-width: 700px) { /* 225 */ .fa-max-150 {font-size: 150px !important; }} @media only screen and (max-width: 650px) { /* 200 */ .fa-max-150 {font-size: 150px !important; }} @media only screen and (max-width: 600px) { /* 150 */ /* kindle - Portrait + iPhone - Landscape*/ .fa-max-150 {font-size: 140px !important; }} @media only screen and (max-width: 566px) { /* 125 */ .fa-max-150 {font-size: 120px !important; }} @media only screen and (max-width: 533px) { /* 100 */ .fa-max-150 {font-size: 110px !important; }} @media only screen and (max-width: 500px) { /* 75 */ /* iPhone - Landscape */ .fa-max-150 {font-size: 95px !important; }} @media only screen and (max-width: 400px) { /* 50 */ /* ------------------------------------------ */ .fa-max-150 {font-size: 80px !important; }} @media only screen and (max-width: 320px) { /* 50 */ /* iPhone - Portrait + small devices Android - Landscape */ .fa-max-150 {font-size: 75px !important; }} @media only screen and (max-width: 240px) { /* 50 */ /* small devices Android - Portrait */ .fa-max-150 {font-size: 45px !important; }} /* ------ MAX 125 PIXEL ------- */ .fa-max-125 {font-size: 125px !important; line-height: 1.14em; margin: 0; padding: 0;} @media only screen and (max-width: 1030px) { /* 300 *//* iPad - kindle - Landscape */ /* 1 */ .fa-max-125 {font-size: 125px !important; }} @media only screen and (max-width: 800px) { /* 275 */ /* iPad - Portrait */ .fa-max-125 {font-size: 125px !important; }} @media only screen and (max-width: 750px) { /* 250 */ .fa-max-125 {font-size: 125px !important; }} @media only screen and (max-width: 700px) { /* 225 */ .fa-max-125 {font-size: 125px !important; }} @media only screen and (max-width: 650px) { /* 200 */ .fa-max-125 {font-size: 125px !important; }} @media only screen and (max-width: 600px) { /* 150 */ /* kindle - Portrait + iPhone - Landscape*/ .fa-max-125 {font-size: 125px !important; }} @media only screen and (max-width: 566px) { /* 125 */ .fa-max-125 {font-size: 115px !important; }} @media only screen and (max-width: 533px) { /* 100 */ .fa-max-125 {font-size: 100px !important; }} @media only screen and (max-width: 500px) { /* 75 */ /* iPhone - Landscape */ .fa-max-125 {font-size: 87px !important; }} @media only screen and (max-width: 400px) { /* 50 */ /* ------------------------------------------ */ .fa-max-125 {font-size: 75px !important; }} @media only screen and (max-width: 320px) { /* 50 */ /* iPhone - Portrait + small devices Android - Landscape */ .fa-max-125 {font-size: 66px !important; }} @media only screen and (max-width: 240px) { /* 50 */ /* small devices Android - Portrait */ .fa-max-125 {font-size: 42px !important; }} /* ------ MAX 100 PIXEL ------- */ .fa-max-100 {font-size: 100px !important; line-height: 1.14em; margin: 0; padding: 0;} @media only screen and (max-width: 1030px) { /* 300 *//* iPad - kindle - Landscape */ /* 1 */ .fa-max-100 {font-size: 100px !important; }} @media only screen and (max-width: 800px) { /* 275 */ /* iPad - Portrait */ .fa-max-100 {font-size: 100px !important; }} @media only screen and (max-width: 750px) { /* 250 */ .fa-max-100 {font-size: 100px !important; }} @media only screen and (max-width: 700px) { /* 225 */ .fa-max-100 {font-size: 100px !important; }} @media only screen and (max-width: 650px) { /* 200 */ .fa-max-100 {font-size: 100px !important; }} @media only screen and (max-width: 600px) { /* 150 */ /* kindle - Portrait + iPhone - Landscape*/ .fa-max-100 {font-size: 100px !important; }} @media only screen and (max-width: 566px) { /* 125 */ .fa-max-100 {font-size: 90px !important; }} @media only screen and (max-width: 533px) { /* 100 */ .fa-max-100 {font-size: 85px !important; }} @media only screen and (max-width: 500px) { /* 75 */ /* iPhone - Landscape */ .fa-max-100 {font-size: 80px !important; }} @media only screen and (max-width: 400px) { /* 50 */ /* ------------------------------------------ */ .fa-max-100 {font-size: 65px !important; }} @media only screen and (max-width: 320px) { /* 50 */ /* iPhone - Portrait + small devices Android - Landscape */ .fa-max-100 {font-size: 57px !important; }} @media only screen and (max-width: 240px) { /* 50 */ /* small devices Android - Portrait */ .fa-max-100 {font-size: 35px !important; }} /* ------ MAX 75 PIXEL ------- */ .fa-max-75 {font-size: 75px !important; line-height: 1.14em; margin: 0; padding: 0;} @media only screen and (max-width: 1030px) { /* 300 *//* iPad - kindle - Landscape */ /* 1 */ .fa-max-75 {font-size: 75px !important; }} @media only screen and (max-width: 800px) { /* 275 */ /* iPad - Portrait */ .fa-max-75 {font-size: 75px !important; }} @media only screen and (max-width: 750px) { /* 250 */ .fa-max-75 {font-size: 75px !important; }} @media only screen and (max-width: 700px) { /* 225 */ .fa-max-75 {font-size: 75px !important; }} @media only screen and (max-width: 650px) { /* 200 */ .fa-max-75 {font-size: 75px !important; }} @media only screen and (max-width: 600px) { /* 150 */ /* kindle - Portrait + iPhone - Landscape*/ .fa-max-75 {font-size: 75px !important; }} @media only screen and (max-width: 566px) { /* 125 */ .fa-max-75 {font-size: 75px !important; }} @media only screen and (max-width: 533px) { /* 100 */ .fa-max-75 {font-size: 70px !important; }} @media only screen and (max-width: 500px) { /* 75 */ /* iPhone - Landscape */ .fa-max-75 {font-size: 60px !important; }} @media only screen and (max-width: 400px) { /* 50 */ /* ------------------------------------------ */ .fa-max-75 {font-size: 55px !important; }} @media only screen and (max-width: 320px) { /* 50 */ /* iPhone - Portrait + small devices Android - Landscape */ .fa-max-75 {font-size: 40px !important; }} @media only screen and (max-width: 240px) { /* 50 */ /* small devices Android - Portrait */ .fa-max-75 {font-size: 30px !important; }} /* ------ MAX 50 PIXEL ------- */ .fa-max-50 {font-size: 50px !important; line-height: 1.14em; margin: 0; padding: 0;} @media only screen and (max-width: 1030px) { /* 300 *//* iPad - kindle - Landscape */ /* 1 */ .fa-max-50 {font-size: 50px !important; }} @media only screen and (max-width: 800px) { /* 275 */ /* iPad - Portrait */ .fa-max-50 {font-size: 50px !important; }} @media only screen and (max-width: 750px) { /* 250 */ .fa-max-50 {font-size: 50px !important; }} @media only screen and (max-width: 700px) { /* 225 */ .fa-max-50 {font-size: 50px !important; }} @media only screen and (max-width: 650px) { /* 200 */ .fa-max-50 {font-size: 50px !important; }} @media only screen and (max-width: 600px) { /* 150 */ /* kindle - Portrait + iPhone - Landscape*/ .fa-max-50 {font-size: 50px !important; }} @media only screen and (max-width: 566px) { /* 125 */ .fa-max-50 {font-size: 50px !important; }} @media only screen and (max-width: 533px) { /* 100 */ .fa-max-50 {font-size: 50px !important; }} @media only screen and (max-width: 500px) { /* 75 */ /* iPhone - Landscape */ .fa-max-50 {font-size: 50px !important; }} @media only screen and (max-width: 400px) { /* 50 */ /* ------------------------------------------ */ .fa-max-50 {font-size: 40px !important; }} @media only screen and (max-width: 320px) { /* 50 */ /* iPhone - Portrait + small devices Android - Landscape */ .fa-max-50 {font-size: 30px !important; }} @media only screen and (max-width: 240px) { /* 50 */ /* small devices Android - Portrait */ .fa-max-50 {font-size: 25px !important; }} /* ------ MAX 30 PIXEL ------- */ .fa-max-30 {font-size: 30px !important; line-height: 1.05em; margin: 0; padding: 0;} @media only screen and (max-width: 1030px) { /* 300 *//* iPad - kindle - Landscape */ /* 1 */ .fa-max-30 {font-size: 30px !important; }} @media only screen and (max-width: 800px) { /* 275 */ /* iPad - Portrait */ .fa-max-30 {font-size: 30px !important; }} @media only screen and (max-width: 750px) { /* 250 */ .fa-max-30 {font-size: 30px !important; }} @media only screen and (max-width: 700px) { /* 225 */ .fa-max-30 {font-size: 30px !important; }} @media only screen and (max-width: 650px) { /* 200 */ .fa-max-30 {font-size: 30px !important; }} @media only screen and (max-width: 600px) { /* 150 */ /* kindle - Portrait + iPhone - Landscape*/ .fa-max-30 {font-size: 30px !important; }} @media only screen and (max-width: 566px) { /* 125 */ .fa-max-30 {font-size: 30px !important; }} @media only screen and (max-width: 533px) { /* 100 */ .fa-max-30 {font-size: 30px !important; }} @media only screen and (max-width: 500px) { /* 75 */ /* iPhone - Landscape */ .fa-max-30 {font-size: 30px !important; }} @media only screen and (max-width: 400px) { /* 50 */ /* ------------------------------------------ */ .fa-max-30 {font-size: 25px !important; }} @media only screen and (max-width: 320px) { /* 50 */ /* iPhone - Portrait + small devices Android - Landscape */ .fa-max-30 {font-size: 22px !important; }} @media only screen and (max-width: 240px) { /* 50 */ /* small devices Android - Portrait */ .fa-max-30 {font-size: 22px !important; }} /* icons size */ /* @end */ /* @group SWAP */ .fa-swap { /* vertical */ -webkit-animation: swap-vertical 0.45s ease-in-out both !important; animation: swap-vertical 0.45s ease-out both !important; -webkit-animation-fill-mode: both; animation-fill-mode: both; overflow: hidden !important; } @keyframes swap-vertical { 0%{ transform: translateY(0px); opacity: 1;} 18%{transform: translateY(20px);opacity: 0.15;} 20%{opacity: 0.2; } 50%{ transform: translateY(60px);} 51%{ transform: translateY(-80px); opacity: 0.0;} 52%{ transform: translateY(-40px); opacity: 0.0;} 58%{ transform: translateY(-10px); opacity: 0.6;} 70%{ transform: translateY(15px); opacity: 1;} 100%{ transform: translateY(0px); opacity: 1;} } @-webkit-keyframes swap-vertical { 0%{ -webkit-transform: translateY(0px); opacity: 1;} 18%{-webkit-transform: translateY(20px);opacity: 0.15;} 20%{opacity: 0.2; } 50%{ -webkit-transform: translateY(60px);} 51%{ -webkit-transform: translateY(-80px); opacity: 0.0;} 52%{ -webkit-transform: translateY(-40px); opacity: 0.0;} 58%{ -webkit-transform: translateY(-10px); opacity: 0.6;} 70%{ -webkit-transform: translateY(15px); opacity: 1;} 100%{ -webkit-transform: translateY(0px); opacity: 1;} } .fa-swap-horizontal { -webkit-animation: swap-horizontal 0.45s ease-in-out both !important; animation: swap-horizontal 0.45s ease-out both !important; -webkit-animation-fill-mode: both; animation-fill-mode: both; overflow: hidden !important; } @keyframes swap-horizontal { 0%{ transform: translateX(0px); opacity: 1;} 18%{transform: translateX(20px);opacity: 0.15;} 20%{opacity: 0.2; } 50%{ transform: translateX(60px);} 51%{ transform: translateX(-80px); opacity: 0.0;} 52%{ transform: translateX(-40px); opacity: 0.0;} 58%{ transform: translateX(-10px); opacity: 0.6;} 70%{ transform: translateX(15px); opacity: 1;} 100%{ transform: translateX(0px); opacity: 1;} } @-webkit-keyframes swap-horizontal { 0%{ -webkit-transform: translateX(0px); opacity: 1;} 18%{-webkit-transform: translateX(20px);opacity: 0.15;} 20%{opacity: 0.2; } 50%{ -webkit-transform: translateX(60px);} 51%{ -webkit-transform: translateX(-80px); opacity: 0.0;} 52%{ -webkit-transform: translateX(-40px); opacity: 0.0;} 58%{ -webkit-transform: translateX(-10px); opacity: 0.6;} 70%{ -webkit-transform: translateX(15px); opacity: 1;} 100%{ -webkit-transform: translateX(0px); opacity: 1;} } /* END */ /* pinch fa-pinch inverse ( for buttons ) */ .fa-pinch { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-transform: translateZ(0px); -webkit-transform-style: preserve-3d; opacity: 1; padding: 1px; overflow: visible; -webkit-animation: pinch 0.55s ease-out both !important; animation: pinch 0.55s ease-out both !important; } /* @end */ /* @group PINCH */ @keyframes pinch { 0% {opacity: 1; transform: scale(1.0) translateX(0) translatey(0);} 25% {opacity: 0.5; transform: scale(0.5) translateX(0) translatey(0);} 33% {opacity: 0; transform: scale(0.0) translateX(0) translatey(0);} 35% {opacity: 0; transform: scale(0.0) translateX(0) translatey(0);} 40% {opacity: 0.0; transform: scale(1.7) translateX(0) translatey(0);} 50% {opacity: 0.2;} 70% {opacity: 0.9;} 100% {opacity: 1; transform: scale(1.0) translateX(0) translatey(0);} } @-webkit-keyframes pinch { 0% {opacity: 1; -webkit-transform: scale(1.0) translateX(0) translatey(0);} 25% {opacity: 0.5; -webkit-transform: scale(0.5) translateX(0) translatey(0);} 33% {opacity: 0; -webkit-transform: scale(0.0) translateX(0) translatey(0);} 35% {opacity: 0; -webkit-transform: scale(0.0) translateX(0) translatey(0);} 40% {opacity: 0.0; -webkit-transform: scale(1.7) translateX(0) translatey(0);} 50% {opacity: 0.2;} 70% {opacity: 0.9;} 100% {opacity: 1; -webkit-transform: scale(1.0) translateX(0) translatey(0);} } .fa-pinch-inverse { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0;margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-transform: translateZ(0px); -webkit-transform-style: preserve-3d; opacity: 1; padding: 1px; overflow: visible; -webkit-animation: pinch-inverse 0.55s ease-out both !important; animation: pinch-inverse 0.55s ease-out both !important; } @keyframes pinch-inverse { 100% {opacity: 1; transform: scale(1.0) translateX(0) translatey(0);} 70% {opacity: 0.5; transform: scale(0.5) translateX(0) translatey(0);} 50% {opacity: 0; transform: scale(0.0) translateX(0) translatey(0);} 40% {opacity: 0; transform: scale(0.0) translateX(0) translatey(0);} 35% {opacity: 0.0; transform: scale(1.7) translateX(0) translatey(0);} 33% {opacity: 0.2;} 25% {opacity: 0.9;} 0% {opacity: 1; transform: scale(1.0) translateX(0) translatey(0);} } @-webkit-keyframes pinch-inverse { 100% {opacity: 1; -webkit-transform: scale(1.0) translateX(0) translatey(0);} 70% {opacity: 0.5; -webkit-transform: scale(0.5) translateX(0) translatey(0);} 50% {opacity: 0; -webkit-transform: scale(0.0) translateX(0) translatey(0);} 40% {opacity: 0; -webkit-transform: scale(0.0) translateX(0) translatey(0);} 35% {opacity: 0.0; -webkit-transform: scale(1.7) translateX(0) translatey(0);} 33% {opacity: 0.2;} 25% {opacity: 0.9;} 0% {opacity: 1; -webkit-transform: scale(1.0) translateX(0) translatey(0);} } /* @end */ /* @group BLURRED */ /* --- BLUR BLURRED--- */ .fa-blurred { filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=0); /* FOR IE8/9 */ -webkit-filter: blur(0px); /* modern browsers only */ -webkit-animation: blurred 0.8s ease-in both !important; animation: blurred 0.8s ease-in both !important; -ms-animation: blurred 0.8s ease-in both !important; } @keyframes blurred{ 0% {filter: blur(0px); -webkit-filter: blur(0px);} 20% {filter: blur(3px); -webkit-filter: blur(3px);} 100% {filter: blur(0px); -webkit-filter: blur(0px);} } @-webkit-keyframes blurred{ 0% {-webkit-filter: blur(0px);} 20% {-webkit-filter: blur(3px);} 100% {-webkit-filter: blur(0px);} } /* @end */ /* @group FLIPPED */ .fa-flipped { /* vertical */ display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; margin-right: auto; margin-left: auto; -webkit-transform: translateZ(0px); -webkit-transform-style: preserve-3d; -webkit-animation: flipped-y 1s ease-in-out both !important; animation: flipped-y 1s ease-in-out both !important; } @-webkit-keyframes flipped-y { 0% {-webkit-transform: perspective(3000px)rotateY(0deg);} 100% {-webkit-transform: perspective(3000px) rotateY(360deg);} } @keyframes flipped-y { 0% {transform: perspective(3000px) rotateY(00deg) rotateX(0deg);} 100% {transform: perspective(3000px) rotateY(360deg) rotateX(0deg);} } .fa-flipped-horizontal { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; margin-right: auto; margin-left: auto; -webkit-transform: translateZ(0px); -webkit-transform-style: preserve-3d; -webkit-animation: flipped-x 1s ease-in-out both !important; animation: flipped-x 1s ease-in-out both !important; } @-webkit-keyframes flipped-x { 0% {-webkit-transform: perspective(3000px)rotateX(0deg);} 100% {-webkit-transform: perspective(3000px) rotateX(360deg);} } @keyframes flipped-x { 0% {transform: perspective(3000px) rotateX(00deg) rotateY(0deg);} 100% {transform: perspective(3000px) rotateX(360deg) rotateY(0deg);} } /* @end */ /* @group BOUNCE - center */ .fa-bounce { -webkit-animation-name: fa-bounce-center ; animation-name: fa-bounce-center ; -webkit-animation-duration: 0.90s; animation-duration: 0.90s; } @-webkit-keyframes fa-bounce-center {from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.230, 0.670, 0.390, 1.300); animation-timing-function: cubic-bezier(0.230, 0.670, 0.390, 1.300);} 0% { opacity: 0; -webkit-transform: scale3d(.4, .4, .4); transform: scale3d(.4, .4, .4); } 20% { -webkit-transform: scale3d(1.14, 1.14, 1.14); transform: scale3d(1.14, 1.14, 1.14); } 40% { -webkit-transform: scale3d(.8, .8, .8); transform: scale3d(.8, .8, .8); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(.95, .95, .95); transform: scale3d(.95, .95, .95); } to {opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes fa-bounce-center { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.230, 0.670, 0.390, 1.300); animation-timing-function: cubic-bezier(0.230, 0.670, 0.390, 1.300);} 0% { opacity: 0; -webkit-transform: scale3d(.4, .4, .4); transform: scale3d(.4, .4, .4);} 20% { -webkit-transform: scale3d(1.14, 1.14, 1.14); transform: scale3d(1.14, 1.14, 1.14); } 40% { -webkit-transform: scale3d(.8, .8, .8); transform: scale3d(.8, .8, .8); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(.95, .95, .95); transform: scale3d(.95, .95, .95); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } /* @end */ /* @group ENLARGE - REDUCE - Buttons States */ /* ------ icon - zoom ------- */ .fa-reduce { /*display: inline-block; vertical-align: baseline;*/ -webkit-transform: translateZ(0px); -webkit-transform-style: preserve-3d; overflow: visible; -webkit-animation: reduce 0.20s ease-in both !important; animation: reduce 0.20s ease-in both !important; transform-origin: center; transform-style: center; } @keyframes reduce { 0% {transform: scale(1);} 100% {transform: scale(0.9);} } @-webkit-keyframes reduce { 0% {-webkit-transform: scale(1);} 100% {-webkit-transform: scale(0.9);} } /* ---- end ----- */ .fa-enlarge { /*display: inline-block; vertical-align: baseline; */ -webkit-transform: translateZ(0px); -webkit-transform-style: preserve-3d; overflow: visible; -webkit-animation: enlarge 0.25s ease-out both !important; animation: enlarge 0.25s ease-out both !important; transform-origin: center; transform-style: center; } @keyframes enlarge { 0% {transform: scale(0.9) translateX(0) translatey(0);} 100% {transform: scale(1.0) translateX(0) translatey(0);} } @-webkit-keyframes enlarge { 0% {-webkit-transform: scale(0.9) translateX(0) translatey(0);} 100% {-webkit-transform: scale(1.0) translateX(0) translatey(0);} } /* @end */ /* @end */