.mod-hdg-l2{
font-weight: normal;
}

.mod-media-horizontal::before{
width: calc(60% + 4vw);
}

.mod-media-horizontal> .content> .hdg{
text-shadow: 0 0 4px white;
}

.mod-media-lyt-flt, .mod-media-lyt-lqd{
overflow: hidden;
display: flex;
align-items: center;
}

.mod-media-lyt-lqd.of-reverse> .content{
position: relative;
}

.mod-media-lyt-lqd.of-reverse> .content::before{
content: "";
position: absolute;
top: 50%;
width: 80%;
margin: 0 10%;
padding-top: 80%;
background: repeating-linear-gradient(to left, rgba(255,255,255,.5) 0 2px, transparent 2px 4px), linear-gradient(to bottom, #e8f5eb 0, #F6FBF7 100%) top left/ 100% 100% no-repeat;
border-radius: 100%;
transform: translateY(-50%);
z-index: -1;
}

.mod-box-05> .inner> .col> .box.of-bgcolor-01{
background: none;
text-align: center;
}

.mod-box-05> .inner> .col> .box.of-bgcolor-01 .mod-txt{
font-weight: bold;
}

.mod-box-05> .inner> .col> .box.of-bgcolor-01 .mod-media{
position: relative;
margin: -12% 0 -4%;
z-index: -1;
}

.mod-box-05> .inner> .col> .box.of-bgcolor-01 .mod-media> *{
position: relative;
z-index: 1;
}

.mod-box-05> .inner> .col> .box.of-bgcolor-01 .mod-media::before{
content: "";
position: absolute;
top: 50%;
left: 50%;
background: repeating-linear-gradient(to bottom, rgba(255,255,255,.5) 0 2px, transparent 2px 5px), linear-gradient(to bottom, #ebebeb 0, white 100%) left top/ 100% no-repeat;
width: 100%;
padding-top: 100%;
border: 20px solid #ffffff;
border-radius: 100%;
box-sizing: content-box;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, .2);
transform: translate(-50%, -50%);
z-index: 0;
}

.mod-box-05> .inner> .col> .box.of-bgcolor-23{
display: flex;
background: repeating-linear-gradient(to left, rgba(255,255,255,.5) 0 2px, transparent 2px 4px) #ebebeb;
padding: 20px;
align-items: center;
}

.sub-text{
padding-left: 20px;
}

.mod-box-05> .inner> .col> .box.of-bgcolor-23 .mod-media{
min-width: 130px;
margin-bottom: 0;
}

.mod-box-05> .inner> .col> .box.of-bgcolor-26{
position: relative;
background: none;
padding: 0;
}

.mod-box-05> .inner> .col> .box.of-bgcolor-26::before{
content: "";
position: absolute;
top: 30%;
right: 0;
bottom: 0;
left: 0;
background: repeating-linear-gradient(to left, rgba(255,255,255,.5) 0 2px, transparent 2px 4px), linear-gradient(to bottom, transparent 0, #e8f5eb 100%) top left/ 100% 100% no-repeat;
z-index: -1;
}

.mod-box-05> .inner> .col> .box.of-bgcolor-26 .mod-txt{
font-weight: bold;
text-align: center;
}

.mod-box-05> .inner> .col> .box.of-bgcolor-26 .mod-media{
position: relative;
margin-bottom: 10px;
}

.mod-box-05> .inner> .col> .box.of-bgcolor-26 .mod-media> *{
position: relative;
}

.mod-box-05> .inner> .col> .box.of-bgcolor-26 .mod-media figcaption{
position: absolute;
top: 50%;
background: rgba(255, 255, 255, .8);
width: 100%;
max-width: none !important;
padding: 5px;
font-weight: bold;
line-height: 1.4;
text-shadow: 1px 1px 0 white;
}

.mod-box-05> .inner> .col> .box.of-bgcolor-26 .mod-media figcaption strong{
font-size: 110%;
}

.mod-media> span a.js-modal-img> .link{
display: none;
}

@media screen and (min-width: 1024px), print{
.mod-media-horizontal> .content{
width: auto;
}
}

.line-top{
display: inline-block;
padding: 2px 10px;
border-top: 1px solid #ccc;
}

.line{
position: relative;
display: inline-block;
padding-left: 10px;
padding-right: 10px;
border-left: 1px solid #5B5B5B;
border-right: 1px solid #5B5B5B;
}

.line::before,
.line::after{
content: "";
position: absolute;
top: 50%;
display: inline-block;
height: 0;
width: 4em;
border-top: 1px solid #5B5B5B;
}

.line::before{right: 100%;}
.line::after{left: 100%;}


#arrow.mod-hdg-l2::before{
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 50px;
display: block;
background: linear-gradient(to bottom left, white 50%, transparent 50%) top left/ 50.1% 100% no-repeat, linear-gradient(to bottom right, white 50%, transparent 50%) top right/ 50.1% 100% no-repeat;
z-index: -1;
}

.of-bgcolor-20{
background: repeating-linear-gradient(to left, rgba(255,255,255,.5) 0 2px, transparent 2px 4px), linear-gradient(to bottom, #dce8f5 0, white 100%) top left/ 100% 100% no-repeat;
}

.of-bgcolor-20> [class^="str-outer"]{background: none;}

.trouble-text{
position: relative;
display: block;
background: #5B5B5B;
margin: 0 -24px;
padding: 10px;
color: white;
font-weight: bold;
}

.scene-text{
position: relative;
display: block;
padding: 20px;
}

.inline{display: inline-block;}

.c-green{color: #75B7AF !important;}
.c-blue{color: #6396D0 !important;}
.c-violet{color: #5C6BBE !important;}
.c-orange{color: #EB6E00 !important;}

.bg-green{background-color: #65B3A4 !important; color: white !important;}

.flex{display: flex;}
.flex.center{justify-content: center;}
.flex.middle{align-items: center;}

.p-10{padding: 10px !important;}
.p-20{padding: 20px !important;}

.m-5{margin: 5px !important;}

.normal{font-weight: normal !important;}

.l-14{line-height: 1.4;}

.fs-36{font-size: 3.6rem !important;}

@media screen and (max-width: 639px){

.line::before,
.line::after{
display: none;
}

.mod-box-05> .inner> .col> .box.of-bgcolor-01 .mod-txt span{
background-color: rgba(255,255,255,.7);
}

.mod-box-05> .inner> .col> .box.of-bgcolor-01 .mod-media::before{
max-width: 80%;
padding-top: 60%;
border-radius: 10px;
}

.mod-box-05> .inner> .col> .box.of-bgcolor-23{
display: block;
}

}