/*****************************************************
* Main *
******************************************************/
html,
body {
height: 100%;
}
html {
scroll-behavior: smooth;
}
body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
::selection {
background-color: var(--primary);
color: #fff;
}
/* ----- Inline Links + Menu Links Hover Animation*/
.ct-text-block a, .ct-div-block>a, .table--contact a,
.widget_nav_menu a, .oxy-mega-dropdown_link,
.testimonial--inner .ct-link-text, #cff a, .inline-link {
position: relative; white-space: nowrap; /*padding-bottom: 1px;*/}
.ct-text-block a:hover, .ct-div-block>a:hover, .table--contact a:hover,
.widget_nav_menu a:hover, .oxy-mega-dropdown_link:before,
.testimonial--inner .ct-link-text:hover, #cff a:hover, .inline-link:hover
{text-decoration: none;}
.ct-text-block a:before, .ct-div-block>a:before, .table--contact a:before,
.widget_nav_menu a:before, .oxy-mega-dropdown_link:before,
.testimonial--inner .ct-link-text:before, #cff a:not(.cff-load-more):before,
.inline-link:before {
content: '';
position: absolute;
display: block;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: var(--accent);
transform: scaleX(0);
transform-origin: bottom right;
transition: transform 0.3s ease-in-out;
}
.footer--contact a, #footer .widget_nav_menu a,
.testimonial--inner .ct-link-text, #footer .inline-link {padding-bottom: 1px;}
.footer--contact a:before, #footer .widget_nav_menu a:before,
.testimonial--inner .ct-link-text:before, #footer .inline-link
{background-color: #fff;}
.ct-text-block a:hover:before, .ct-div-block>a:hover:before, .table--contact a:hover:before,
.widget_nav_menu a:hover:before, .oxy-mega-dropdown_link:hover:before,
.testimonial--inner .ct-link-text:hover:before, #cff a:hover:before, .inline-link:hover:before {
transform: scaleX(1);
transform-origin: bottom left;
}
#nav-main .oxy-mega-dropdown_link-current:before {transform: scaleX(1);}
@media screen and (max-width: 992px) {
.oxy-mega-dropdown_link:hover:before {
transform: scaleX(0);
}
}
/* ----- Wordbreak + Hyphenation */
.hyphenate /*.ct-text-block, .ct-headline*/ {
/* These are technically the same, but use both */
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
/* This is the dangerous one in WebKit, as it breaks things wherever */
word-break: break-all;
/* Instead use this non-standard one: */
word-break: break-word;
/* Adds a hyphen where the word breaks, if supported (No Blink) */
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter