/**********************************
Content Box Advanced Styling
- not core CSS, optionally included
- figure
- hdr
- hover
- is-title
- is-btn-ghost
***********************************/
/* Style 1 */
.is-title1-96 {margin-top:20px;margin-bottom:20px;}
.is-title1-80 {margin-top:15px;margin-bottom:15px;}
.is-title1-64 {margin-top:15px;margin-bottom:15px;}
.is-title1-48 {margin-top:15px;margin-bottom:15px;}
.is-title1-32 {margin-top:15px;margin-bottom:15px;}
/* Style 2 */
.is-title2-96 {margin-top:25px;margin-bottom:20px;}
.is-title2-80 {margin-top:20px;margin-bottom:15px;}
.is-title2-64 {margin-top:20px;margin-bottom:15px;}
.is-title2-48 {margin-top:15px;margin-bottom:15px;}
.is-title2-32 {margin-top:10px;margin-bottom:15px;}
/* Style 3 */
.is-title3-96 {margin-top:30px;margin-bottom:35px;padding:20px 0;border-top:#000 2px solid;border-bottom:#000 2px solid;}
.is-title3-80 {margin-top:25px;margin-bottom:33px;padding:20px 0;border-top:#000 2px solid;border-bottom:#000 2px solid;}
.is-title3-64 {margin-top:20px;margin-bottom:30px;padding:18px 0;border-top:#000 2px solid;border-bottom:#000 2px solid;}
.is-title3-48 {margin-top:20px;margin-bottom:25px;padding:18px 0;border-top:#000 2px solid;border-bottom:#000 2px solid;}
.is-title3-32 {margin-top:20px;margin-bottom:20px;padding:15px 0;border-top:#000 2px solid;border-bottom:#000 2px solid;}
.is-light-text .is-title3-96 {border-top:#fff 2px solid;border-bottom:#fff 2px solid;}
.is-light-text .is-title3-80 {border-top:#fff 2px solid;border-bottom:#fff 2px solid;}
.is-light-text .is-title3-64 {border-top:#fff 2px solid;border-bottom:#fff 2px solid;}
.is-light-text .is-title3-48 {border-top:#fff 2px solid;border-bottom:#fff 2px solid;}
.is-light-text .is-title3-32 {border-top:#fff 2px solid;border-bottom:#fff 2px solid;}
.is-dark-text .is-title3-96 {border-top:#000 2px solid;border-bottom:#000 2px solid;}
.is-dark-text .is-title3-80 {border-top:#000 2px solid;border-bottom:#000 2px solid;}
.is-dark-text .is-title3-64 {border-top:#000 2px solid;border-bottom:#000 2px solid;}
.is-dark-text .is-title3-48 {border-top:#000 2px solid;border-bottom:#000 2px solid;}
.is-dark-text .is-title3-32 {border-top:#000 2px solid;border-bottom:#000 2px solid;}
/* Style 4 */
.is-title4-96 {margin-top:30px;margin-bottom:35px;padding:20px 30px;border:#000 2px solid;}
.is-title4-80 {margin-top:25px;margin-bottom:33px;padding:20px 30px;border:#000 2px solid;}
.is-title4-64 {margin-top:20px;margin-bottom:30px;padding:18px 28px;border:#000 2px solid;}
.is-title4-48 {margin-top:20px;margin-bottom:25px;padding:18px 25px;border:#000 2px solid;}
.is-title4-32 {margin-top:20px;margin-bottom:20px;padding:15px 20px;border:#000 2px solid;}
.is-light-text .is-title4-96 {border:#fff 2px solid;}
.is-light-text .is-title4-80 {border:#fff 2px solid;}
.is-light-text .is-title4-64 {border:#fff 2px solid;}
.is-light-text .is-title4-48 {border:#fff 2px solid;}
.is-light-text .is-title4-32 {border:#fff 2px solid;}
.is-dark-text .is-title4-96 {border:#000 2px solid;}
.is-dark-text .is-title4-80 {border:#000 2px solid;}
.is-dark-text .is-title4-64 {border:#000 2px solid;}
.is-dark-text .is-title4-48 {border:#000 2px solid;}
.is-dark-text .is-title4-32 {border:#000 2px solid;}
/* Style 5 */
.is-title5-96 {margin-top:10px;margin-bottom:35px;padding-bottom:25px;border-bottom:#000 2px solid;}
.is-title5-80 {margin-top:10px;margin-bottom:33px;padding-bottom:25px;border-bottom:#000 2px solid;}
.is-title5-64 {margin-top:10px;margin-bottom:30px;padding-bottom:20px;border-bottom:#000 2px solid;}
.is-title5-48 {margin-top:10px;margin-bottom:25px;padding-bottom:20px;border-bottom:#000 2px solid;}
.is-title5-32 {margin-top:10px;margin-bottom:20px;padding-bottom:20px;border-bottom:#000 2px solid;}
.is-light-text .is-title5-96 {border-bottom:#fff 2px solid;}
.is-light-text .is-title5-80 {border-bottom:#fff 2px solid;}
.is-light-text .is-title5-64 {border-bottom:#fff 2px solid;}
.is-light-text .is-title5-48 {border-bottom:#fff 2px solid;}
.is-light-text .is-title5-32 {border-bottom:#fff 2px solid;}
.is-dark-text .is-title5-96 {border-bottom:#000 2px solid;}
.is-dark-text .is-title5-80 {border-bottom:#000 2px solid;}
.is-dark-text .is-title5-64 {border-bottom:#000 2px solid;}
.is-dark-text .is-title5-48 {border-bottom:#000 2px solid;}
.is-dark-text .is-title5-32 {border-bottom:#000 2px solid;}
/* Extra Title Styles */
.is-title-lite {letter-spacing:3px;word-spacing:5px;}
.is-title-lite.is-title3-96, .is-title-lite.is-title4-96, .is-title-lite.is-title5-96 {letter-spacing:4px;word-spacing:8px;}
.is-title-lite.is-title3-80, .is-title-lite.is-title4-80, .is-title-lite.is-title5-80 {letter-spacing:4px;word-spacing:8px;}
.is-title-lite.is-title3-64, .is-title-lite.is-title4-64, .is-title-lite.is-title5-64 {letter-spacing:4px;word-spacing:8px;}
.is-title-lite.is-title3-48, .is-title-lite.is-title4-48, .is-title-lite.is-title5-48 {letter-spacing:4px;word-spacing:8px;}
.is-title-lite.is-title3-32, .is-title-lite.is-title4-32, .is-title-lite.is-title5-32 {letter-spacing:3px;word-spacing:5px;}
.is-title-bold {font-weight:800;}
.is-title-bold.is-title3-96, .is-title-bold.is-title4-96, .is-title-bold.is-title5-96 {border-width:4px;}
.is-title-bold.is-title3-80, .is-title-bold.is-title4-80, .is-title-bold.is-title5-80 {border-width:4px;}
.is-title-bold.is-title3-64, .is-title-bold.is-title4-64, .is-title-bold.is-title5-64 {border-width:3px;}
.is-title-bold.is-title3-48, .is-title-bold.is-title4-48, .is-title-bold.is-title5-48 {border-width:3px;}
.is-title-bold.is-title3-32, .is-title-bold.is-title4-32, .is-title-bold.is-title5-32 {border-width:2px;}
/*.is-fill-section = force fit content to section area with one click*/
.is-fill-section{height:auto!important; }
.is-fill-section .is-container{margin-top:0!important;margin-bottom:0!important;margin-left:auto!important;margin-right:auto!important;max-width: none!important;width:100%;padding:0!important;}
.is-fill-section .is-container .row{margin-left:0;margin-right:0;}
.is-fill-section .is-container .column:first-child{padding-left:0!important;}
.is-fill-section .is-container .column:last-child{padding-right:0!important;}
.is-fill-section .column>.embed-responsive,.is-fill-section .column>a>img,.is-fill-section .column>figure,.is-fill-section .column>img {margin-top: 0;margin-bottom: 0;}
/* ghost1 default */
.is-btn-ghost1 { color: #000; border: 2px solid #111; }
.is-btn-ghost1:hover, .is-btn-ghost1:active, .is-btn-ghost1:focus {
color: #fff;
background-color: #111;
border: 2px solid #111;
text-decoration: none;
}
/* ghost1 light-text */
.is-light-text .is-btn-ghost1,
.is-dark-text .is-light-text .is-btn-ghost1 { color: #fff; border: 2px solid #fff;}
.is-light-text .is-btn-ghost1:hover, .is-light-text .is-btn-ghost1:active, .is-light-text .is-btn-ghost1:focus,
.is-dark-text .is-light-text .is-btn-ghost1:hover, .is-dark-text .is-light-text .is-btn-ghost1:active, .is-dark-text .is-light-text .is-btn-ghost1:focus {
color: #000;
background-color: #fff;
border: 2px solid #fff;
}
/* ghost1 dark-text */
.is-dark-text .is-btn-ghost1,
.is-light-text .is-dark-text .is-btn-ghost1 { color: #000; border: 2px solid #111; }
.is-dark-text .is-btn-ghost1:hover, .is-dark-text .is-btn-ghost1:active, .is-dark-text .is-btn-ghost1:focus,
.is-light-text .is-dark-text .is-btn-ghost1:hover, .is-light-text .is-dark-text .is-btn-ghost1:active, .is-light-text .is-dark-text .is-btn-ghost1:focus {
color: #fff;
background-color: #111;
border: 2px solid #111;
}
/* ghost2 default */
.is-btn-ghost2 { color: #000; border: 2px solid #d7d7d7; background-color: #d7d7d7; }
.is-btn-ghost2:hover, .is-btn-ghost2:active, .is-btn-ghost2:focus {
color: #000;
background-color: #cdcdcd;
border: 2px solid #cdcdcd;
text-decoration: none;
}
/* ghost2 light-text */
.is-light-text .is-btn-ghost2,
.is-dark-text .is-light-text .is-btn-ghost2 { color: #000; border: 2px solid #f9f9f9; background-color: #f9f9f9; }
.is-light-text .is-btn-ghost2:hover, .is-light-text .is-btn-ghost2:active, .is-light-text .is-btn-ghost2:focus,
.is-dark-text .is-light-text .is-btn-ghost2:hover, .is-dark-text .is-light-text .is-btn-ghost2:active, .is-dark-text .is-light-text .is-btn-ghost2:focus {
color: #000;
background-color: #fff;
border: 2px solid #fff;
}
/* ghost2 dark-text */
.is-dark-text .is-btn-ghost2,
.is-light-text .is-dark-text .is-btn-ghost2 { color: #000; border: 2px solid #d7d7d7; background-color: #d7d7d7; }
.is-dark-text .is-btn-ghost2:hover, .is-dark-text .is-btn-ghost2:active, .is-dark-text .is-btn-ghost2:focus,
.is-light-text .is-dark-text .is-btn-ghost2:hover, .is-light-text .is-dark-text .is-btn-ghost2:active, .is-light-text .is-dark-text .is-btn-ghost2:focus {
color: #000;
background-color: #cdcdcd;
border: 2px solid #cdcdcd;
}
img.hoverfade{
transition: 0.2s opacity ease-in-out;
}
img.hovergray,
img.hoverblur,
img.hoverblurmin{
-webkit-transition: 0.2s -webkit-filter ease-in-out;
-moz-transition: 0.2s -moz-filter ease-in-out;
-moz-transition: 0.2s filter ease-in-out;
-ms-transition: 0.2s -ms-filter ease-in-out;
-o-transition: 0.2s -o-filter ease-in-out;
transition: 0.2s filter linear, 0.2s -webkit-filter ease-in-out;
}
img.hovergray:hover{-webkit-filter: grayscale(100%); filter: grayscale(100%);}
img.hoverblur:hover{-webkit-filter: blur(5px); filter: blur(5px);}
img.hoverblurmin:hover{-webkit-filter: blur(1px); filter: blur(1px);}
img.hoverfade:hover{opacity:0.7;}
.hoverOverReveal .column:not(:hover) .cbimageoverlay,
.hoverOverReveal.column:not(:hover) .cbimageoverlay{
opacity:0!important;
transition: 0.3s opacity ease-in-out;
}
.hoverCaptReveal .column:not(:hover) .cbcaptioncontainer,
.hoverCaptReveal.column:not(:hover) .cbcaptioncontainer{
background-color:rgba(0,0,0,0)!important;
transition: 0.3s background-color ease-in-out;
}
/*AJ Additional section background animations*/
.is-section.hoverall .is-overlay-color,
.is-section.hoverall .is-overlay-bg,
.is-section.hoverzoom .is-overlay-bg{
-webkit-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
.is-section.hoverall .is-container{
transition: all 1 cubic-bezier(.160,.85,.45,1);
-webkit-transition: all 1 cubic-bezier(.160,.85,.45,1);
transition-delay: 0.2s;
}
.is-section.hoverout .is-overlay-color{
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.is-section.hoverall .is-overlay-bg,
.is-section.hoverzoom .is-overlay-bg{
transform: scale(1);
}
.is-section.hoverall:hover .is-overlay-bg,
.is-section.hoverzoom:hover .is-overlay-bg{
transform: scale(1.2);
}
.is-section.hoverall .is-overlay-color,
.is-section.hoverall .is-container{
opacity:0.0!important;
}
.is-section.hoverall .is-container{
transform: translateY(2rem);
}
.is-section.hoverall:hover .is-overlay-color{
opacity:0.7!important;
}
.is-section.hoverall:hover .is-container{
opacity:1!important;
transform: translateY(0);
}
.is-section.hoverout:hover .is-overlay-color{
opacity:0!important;
}
.hoverBorderReveal:not(:hover){
border-color:transparent!important;
}
.is-hovercontent-fadein .is-container{
opacity:0;
transition: 0.3s opacity ease-in-out;
}
.is-hovercontent-fadein:hover .is-container{
opacity:1!important; /*overide set inline opacity*/
}
/**********************************
RSJ hack
Header Image with Caption
.hdr is old school effect,
***********************************/
figure.hdr:hover img, img.hoverfade:hover {
opacity:1;
}
figure.hdr img.nozoom {
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
/* up/down partial fade, in/out complete fade - settings when applied to .row,.col,img,figure.hdr img*/
.hoverzoom img, img.hoverzoom,
.hoverfadeup img,img.hoverfadeup,
.hoverfadein img,img.hoverfadein,
.hoverfadedown img,img.hoverfadedown,
.hoverfadeout img,img.hoverfadeout,
.hoverzoomin img,img.hoverzoomin,
.hoverzoomfade img,img.hoverzoomfade{
-webkit-transition: all 0.35s, -webkit-transform 0.35s;
transition: all 0.35s, transform 0.35s;
}
.hoverzoomin .cbimagecontainer,
.hoverzoomfade .cbimagecontainer{
overflow:hidden;
}
.hoverzoomin img,
img.hoverzoomin,
.hoverzoomin .column:hover .cbimagecontainer img{
display:block;
-webkit-transform: scale(1);
transform: scale(1);
}
figure.hdr img.hoverzoom, img.hoverzoom, .hoverzoom > .column img,
.hoverzoom > .column:hover .cbimagecontainer img {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
img.hoverzoomfade,.hoverzoomfade img{
-webkit-transform: scale(1.2);
transform: scale(1.2);
opacity:1;
}
.hoverzoomin img:hover,
img.hoverzoomin:hover,
.hoverzoomin .column:hover img,
.hoverzoomin .column:hover .cbimagecontainer:hover img
{
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.row.hoverzoomin .column figure.hdr,
.column.hoverzoomin figure.hdr{margin-top:0;margin-bottom:0;}
figure.hdr:hover img.hoverzoom , img.hoverzoom:hover,
.hoverzoom > .column:hover img,
.hoverzoom > .column:hover .cbimagecontainer:hover img {
-webkit-transform: scale(1);
transform: scale(1);
}
figure:hover img.hoverzoomfade,.hoverzoomfade figure:hover img, img.hoverzoomfade:hover {
-webkit-transform: scale(1);
transform: scale(1);
opacity:0.5;
}
figure:hover img.hoverzoom,.hoverzoom figure:hover img, img.hoverzoom:hover, {
-webkit-transform: scale(1);
transform: scale(1);
}
/*up*/
/*.column:hover .cbimagecontainer:hover rules --> are for nested column column snippets*/
figure.hdr img.hoverfadeup,img.hoverfadeup, .row.hoverfadeup img, .column.hoverfadeup img {
opacity: 0.6;
}
figure.hdr:hover img.hoverfadeup, img.hoverfadeup:hover, .hoverfadeup .column:hover img, .column.hoverfadeup:hover img {
opacity: 1;
}
/*down*/
figure.hdr img.hoverfadedown,
figure.hdr:hover img.hoverfadedown,img.hoverfadedown, .row.hoverfadedown img, .column.hoverfadedown img {
opacity: 1;
}
figure.hdr:hover img.hoverfadedown,img.hoverfadedown:hover, .hoverfadedown .column:hover img, .column.hoverfadedown:hover img {
opacity: 0.8;
}
/*in*/
figure.hdr img.hoverfadein,img.hoverfadein, .row.hoverfadein img, .column.hoverfadein img, .hoverfadein .column:hover .cbimagecontainer img {
opacity: 0;
}
figure.hdr:hover img.hoverfadein, img.hoverfadein:hover, .hoverfadein .column:hover img, .column.hoverfadein:hover img, .hoverfadein .column:hover .cbimagecontainer:hover img {
opacity: 1;
}
/*out*/
figure.hdr img.hoverfadeout,img.hoverfadeout, .row.hoverfadeout img, .column.hoverfadeout img, .hoverfadeout .column:hover .cbimagecontainer img {
opacity: 1;
}
figure.hdr:hover img.hoverfadeout,img.hoverfadeout:hover, .hoverfadeout .column:hover img, .hoverfadeout .column:hover .cbimagecontainer:hover img {
opacity: 0;
}
/**********************************
Header Image with Caption
***********************************/
figure.hdr {
position: relative;
width: 100%;
overflow:hidden;
background-color: #000;
background-color:inherit; /*from row*/
}
.figdark figure.hdr,.figdark figure{
background-color: #000;
}
figure.hdr img {
position: relative;
display: block;
width: 100%;
/*
opacity: 0.8;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(1.2);
transform: scale(1.2);
*/
}
/*
figure.hdr:hover img {
opacity: 0.5;
-webkit-transform: scale(1);
transform: scale(1);
}
*/
figure.hdr figcaption {
position: absolute;
top: auto;
bottom: 0;
left: 0;
width: 100%;
height: 60%;
padding: 0 2.5em;
color: #fff;
font-size: 1.55em;
text-align: center;
box-sizing: border-box;
z-index:1;
}
/* Text */
figure.hdr h2 {
font-weight: 300;
text-transform: uppercase;
}
figure.hdr h2 span {
font-weight: 800;
}
figure.hdr p {
letter-spacing: 1px;
font-size: 68.5%;
text-transform: uppercase;
}
figure.hdr h2, figure.hdr p {
margin: 0;
z-index:10000;
}
/* Cosmetic */
figure.hdr div {
height: 100%;
z-index:0;
}
figure.hdr div::before,
figure.hdr div::after,
figure.one div::before,
figure.one div::after {
position: absolute;
content: '';
}
/* One */
figure.one div::before {
top: 50px;
right: 30px;
bottom: 50px;
left: 30px;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
}
figure.one div::after {
top: 30px;
right: 50px;
bottom: 30px;
left: 50px;
border-right: 1px solid #fff;
border-left: 1px solid #fff;
}
/* Two */
figure.two div::before {
top: 30px;
right: 30px;
bottom: 30px;
left: 30px;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
}
figure.two div::after {
top: 30px;
right: 30px;
bottom: 30px;
left: 30px;
border-right: 1px solid #fff;
border-left: 1px solid #fff;
}
/* Three */
figure.three figcaption {
height: 70%;
}
figure.three p {
margin: 1em 0 0;
padding: 2em;
border: 1px solid #fff;
}
/* Four */
figure.four figcaption {
height: 60%;
text-align: left;
}
figure.four p {
position: absolute;
right: 50px;
bottom: 50px;
left: 50px;
padding: 2em;
border: 7px solid #fff;
}
/* Five */
figure.five figcaption {
height: 100%;
text-align: right;
}
figure.five h2 {
position: absolute;
left: 50px;
right: 50px;
top: 10%;
border-bottom: 5px solid #fff;
}
figure.five p {
position: absolute;
right: 50px;
bottom: 10%;
}
/* Six */
figure.six figcaption {
height: 70%;
}
figure.six h2 {
padding-bottom: 3%;
border-bottom: 1px solid #fff;
}
figure.six p {
padding-top: 6%;
}
/* Seven */
figure.seven figcaption {
height: 90%;
text-align:left;
}
figure.seven h2 {
border-bottom: 3px solid #fff;
}
figure.seven p {
padding-top: 1em;
}
/* Eight */
figure.eight figcaption {
height: 100%;
text-align: right;
}
figure.eight h2 {
position: absolute;
left: 50%;
right: 50px;
bottom: 10%;
}
figure.eight p {
position: absolute;
left: 50px;
right: 50%;
top: 10%;
padding-right:0.5em;
border-right: 1px solid #fff;
}
@media all and (max-width: 560px) {
/*restyle above for mobile*/
.row figure.one div::before {
top: 20px;
right: 10px;
bottom: 20px;
left: 10px;
}
.row figure.one div::after {
top: 10px;
right: 20px;
bottom: 10px;
left: 20px;
}
}
/*lets put this here rather in core*/
.cbcaptioncontainer figcaption{font-size:25px;} /*base caption size if not heading*/
#cmsPageContainer .cbcaptioncontainer figcaption *{font-size:inherit;} /*use font-size as set by default*/
.disableClick .cbcaptioncontainer{
pointer-events: none!important;
}
.ineditor .disableClick .cbcaptioncontainer{
pointer-events: all!important;
}
.txtOnHover .cbcaptioncontainer, .txtOnUpHover .cbcaptioncontainer{
opacity: 0;
transition: all .5s ease;
}
.row.txtOnHover figure img,.column.txtOnHover figure img,
.row.txtOnUpHover figure img, .column.txtOnUpHover figure img{
opacity:1;
transition:opacity 0.5s ease!important;
}
.row.txtOnHoverZoom figure img,.column.txtOnHoverZoom figure img,
.row.txtOnUpHoverZoom figure img,.column.txtOnUpHoverZoom figure img{
opacity:1;
transition:all 0.5s ease!important;
}
.row.txtOnUpHover figure figcaption,
.column.txtOnUpHover figure figcaption{
opacity:0;
top:20px;
transition:all 0.5s ease;
}
.txtOnHover figure:hover figcaption,
.txtOnHoverZoom figure:hover figcaption,
.txtOnHover figure:hover .cbcaptioncontainer,
.txtOnHoverZoom figure:hover .cbcaptioncontainer{
opacity:1!important;
}
.row.txtOnUpHover figure:hover figcaption,
.column.txtOnUpHover figure:hover figcaption,
.row.txtOnUpHover figure:hover .cbcaptioncontainer,
.column.txtOnUpHover figure:hover .cbcaptioncontainer
{
opacity:1;
top:0px;
}
.row.txtOnHover figure:hover img,
.column.txtOnHover figure:hover img,
.row.txtOnUpHover figure:hover img,
.column.txtOnUpHover figure:hover img{
/*opacity:0.6; AJ Removed as unexpected behaviour, superceded by caption overlay colour*/
}
.row.txtOnHoverZoom figure:hover img,
.column.txtOnHoverZoom figure:hover img,
.row.txtOnUpHoverZoom figure:hover img,
.column.txtOnUpHoverZoom figure:hover img{
opacity:0.6;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.txtOnHoverZoom figure{
overflow:hidden;
}
/*=====================================
UPDATED CAPTION ANIMATION STYLE
=====================================*/
.txtOnHover figure:hover .cbcaptionoverlay,
.txtOnUpHover figure:hover .cbcaptionoverlay,
.txtOnHoverZoom figure:hover .cbcaptionoverlay,
.txtOnHover figure:hover .cbimagecontainer img,
.txtOnUpHover figure:hover .cbimagecontainer img,
.txtOnHoverZoom figure:hover .cbimagecontainer img{
opacity:1!important;
}
.txtOnHover figure:hover .cbcaptioncontainer figcaption,
.txtOnUpHover figure .cbcaptioncontainer figcaption,
.txtOnUpHover figure:hover .cbcaptioncontainer figcaption{
top:unset!important; /*undo old approach*/
}
.txtOnUpHover figure .cbcaptioncontainer{
top:20px;
transition:all 0.5s ease;
}
.txtOnUpHover figure:hover .cbcaptioncontainer{
top:0
}
/*=====================================
---- CONTENTBOX BANNER OVERLAY STYLING ---
=====================================*/
/*Also in common_slidewhow for legacy use*/
.cbimagecontainer{
overflow:hidden; /*to prevent overlaps with elements below, remove if issues*/
}
@media(min-width:560px){
.cbOverlayRight50{
left:50%!important;
}
.cbOverlayLeft50{
right:48%!important;
left:auto!important;
width:100%;
}
.cbOverlaySkewRight{
left:50%!important;
transform: skew(20deg);
width:100%;
}
.cbOverlaySkewLeft{
left:auto!important;
right:48%!important;
transform: skew(20deg);
width:100%;
}
.cbOverlayGradLeft,.cbOverlayGradRight{
background-color:unset!important;
}
}
/*=====================================
MODAL-PINS.JS STYLING
=====================================*/
.cbPin {
z-index: 4;
position: absolute;
top: 10%;
left: 50%;
font-size: 30px;
}
.cbPinlabel {
position: absolute;
background: white;
width: 20rem;
border-radius: .5rem;
padding: 1rem;
top: calc(100% + 1rem);
left: 50%;
transform: translate(-50%);
transition: opacity 0.3s ease;
opacity: 0;
visibility: hidden;
text-align: center;
font-size: 14px;
max-width: 200px;
}
.cbPinlabel:before {
content: "";
display: block;
width: 0;
height: 0;
border-left: 12px solid transparent;
border-bottom: 12px solid #ffffff;
border-right: 12px solid transparent;
position: absolute;
top: -12px;
left:50%;
margin-left:-12px;
}
.cbPin.rc-edit .cbPinlabel,
.cbPin:hover .cbPinlabel {
opacity:1;
visibility:visible;
}
.cbPintitle{
font-weight:700;
color:black!important;
}
.cbPintext{
color:black!important;
}