.cmk-downup,
.cmk-updown {
display: inline-block;
position: relative;
overflow: hidden;
text-decoration: none;
z-index: 1;
}
.cmk-downup:before {
content: "";
width: 50%;
height: 100%;
background-color: #f2295b;
color: #fff;
position: absolute;
left: 0;
top: -100%;
z-index: -1;
transition: .5s;
opacity: 0;
}
.cmk-downup:after {
content: "";
width: 50%;
height: 100%;
background-color: #f2295b;
color: #fff;
position: absolute;
right: 0;
bottom: -100%;
z-index: -1;
transition: .5s;
opacity: 0;
}
.cmk-updown:before {
content: "";
width: 50%;
height: 100%;
background-color: #f2295b;
color: #fff;
position: absolute;
left: 0;
top: 100%;
z-index: -1;
transition: .5s;
opacity: 0;
}
.cmk-updown:after {
content: "";
width: 50%;
height: 100%;
background-color: #f2295b;
color: #fff;
position: absolute;
right: 0;
bottom: 100%;
z-index: -1;
transition: .5s;
opacity: 0;
}
.cmk-downup:hover,
.cmk-updown:hover {
color: #fff;
}
.cmk-downup:hover:before,
.cmk-updown:hover:before {
top: 0;
transition: .5s;
opacity: 1;
}
.cmk-downup:hover:after,
.cmk-updown:hover:after {
bottom: 0;
transition: .5s;
opacity: 1;
}
.cmk-slide-in-vertical,
.cmk-slide-in-horizontal,
.cmk-slide-out-vertical,
.cmk-slide-out-horizontal {
display: inline-block;
color: #fff;
position: relative;
overflow: hidden;
text-decoration: none;
z-index: 1;
}
.cmk-slide-out-vertical:hover,
.cmk-slide-out-horizontal:hover {
transition: .5s;
}
.cmk-slide-in-vertical:hover,
.cmk-slide-in-horizontal:hover {
transition: .5s;
}
.cmk-slide-out-horizontal:before {
background-color: #f2295b;
color: #fff;
position: absolute;
content: "";
width: 50%;
height: 100%;
left: 0;
top: 0;
z-index: -1;
transition: .5s;
opacity: 1;
}
.cmk-slide-out-horizontal:after {
background-color: #f2295b;
color: #fff;
position: absolute;
content: "";
width: 50%;
height: 100%;
right: 0;
bottom: 0;
z-index: -1;
transition: .5s;
opacity: 1;
}
.cmk-slide-out-horizontal:hover:before {
left: -50%;
transition: .5s;
opacity: 0;
}
.cmk-slide-out-horizontal:hover:after {
right: -50%;
transition: .5s;
opacity: 0;
}
.cmk-slide-out-vertical:before {
content: "";
width: 100%;
height: 50%;
background-color: #f2295b;
color: #fff;
position: absolute;
left: 0;
top: 0;
z-index: -1;
transition: .5s;
opacity: 1;
}
.cmk-slide-out-vertical:after {
content: "";
width: 100%;
height: 50%;
background-color: #f2295b;
color: #fff;
position: absolute;
right: 0;
bottom: 0;
z-index: -1;
transition: .5s;
opacity: 1;
}
.cmk-slide-out-vertical:hover:before {
top: -50%;
transition: .5s;
opacity: 0;
}
.cmk-slide-out-vertical:hover:after {
bottom: -50%;
transition: .5s;
opacity: 0;
}
.cmk-slide-in-vertical:before {
content: "";
width: 100%;
height: 50%;
background-color: #f2295b;
color: #fff;
position: absolute;
left: 0;
top: -100%;
z-index: -1;
transition: .5s;
opacity: 0;
}
.cmk-slide-in-vertical:after {
content: "";
width: 100%;
height: 50%;
background-color: #f2295b;
color: #fff;
position: absolute;
right: 0;
bottom: -100%;
z-index: -1;
transition: .5s;
opacity: 0;
}
.cmk-slide-in-vertical:hover:before {
top: 0;
transition: .5s;
opacity: 1;
}
.cmk-slide-in-vertical:hover:after {
bottom: 0;
transition: .5s;
opacity: 1;
}
.cmk-slide-in-horizontal:before {
background-color: #f2295b;
color: #fff;
position: absolute;
content: "";
width: 50%;
height: 100%;
left: -50%;
top: 0;
z-index: -1;
transition: .5s;
opacity: 0;
}
.cmk-slide-in-horizontal:after {
background-color: #f2295b;
color: #fff;
position: absolute;
content: "";
width: 50%;
height: 100%;
right: -50%;
bottom: 0;
z-index: -1;
transition: .5s;
opacity: 0;
}
.cmk-slide-in-horizontal:hover:before {
left: 0;
transition: .5s;
opacity: 1;
}
.cmk-slide-in-horizontal:hover:after {
right: 0;
transition: .5s;
opacity: 1;
}
.cmk-slide-left,
.cmk-slide-right,
.cmk-slide-up,
.cmk-slide-down {
display: inline-block;
color: #fff;
position: relative;
overflow: hidden;
text-decoration: none;
z-index: 5;
}
.cmk-slide-left:hover,
.cmk-slide-right:hover,
.cmk-slide-up:hover,
.cmk-slide-down:hover {
color: #fff;
transition: .5s;
}
.cmk-slide-left:before {
content: "";
width: 100%;
height: 100%;
background-color: #f2295b;
color: #fff;
position: absolute;
left: -100%;
top: 0;
z-index: -1;
transition: .5s;
opacity: 0;
}
.cmk-slide-left:hover:before {
left: 0;
transition: .5s;
opacity: 1;
}
.cmk-slide-right:before {
content: "";
width: 100%;
height: 100%;
background-color: #f2295b;
color: #fff;
position: absolute;
right: -100%;
top: 0;
z-index: -1;
transition: .5s;
opacity: 0;
}
.cmk-slide-right:hover:before {
right: 0;
transition: .5s;
opacity: 1;
}
.cmk-slide-up:before {
content: "";
width: 100%;
height: 100%;
background-color: #f2295b;
color: #fff;
position: absolute;
left: 0;
bottom: -100%;
z-index: -1;
transition: .5s;
opacity: 0;
}
.cmk-slide-up:hover:before {
bottom: 0;
transition: .5s;
opacity: 1;
}
.cmk-slide-down:before {
content: "";
width: 100%;
height: 100%;
background-color: #f2295b;
color: #fff;
position: absolute;
left: 0;
top: -100%;
z-index: -1;
transition: .5s;
opacity: 0;
}
.cmk-slide-down:hover:before {
top: 0;
transition: .5s;
opacity: 1;
}
.cmk-slideout-horizontal,
.cmk-slideout-vertical, 
.cmk-rotate-left,
.cmk-rotate-right {
color: #fff;
display: inline-block;
overflow: hidden;
position: relative;
text-decoration: none;
transition: 1s all ease;
z-index: 5;
}
.cmk-slideout-horizontal:before,
.cmk-slideout-vertical:before, 
.cmk-rotate-left:before,
.cmk-rotate-right:before {
background-color: #f2295b;
color: #fff;
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
transition: all 0.6s ease;
}
.cmk-slideout-horizontal:hover,
.cmk-slideout-vertical:hover, 
.cmk-rotate-left:hover,
.cmk-rotate-right:hover {
color: #fff;
transition: 1s all ease;
}
.cmk-slideout-horizontal:before {
width: 0;
height: 100%;
}
.cmk-slideout-horizontal:hover:before {
width: 100%;
}
.cmk-slideout-vertical:before {
width: 100%;
height: 0;
}
.cmk-slideout-vertical:hover:before {
height: 100%;
}
.cmk-rotate-left::before {
width: 100%;
height: 0;
transform: translate(-50%, -50%) rotate(45deg);
}
.cmk-rotate-left:hover:before {
height: 300%;
}
.cmk-rotate-right:before {
width: 100%;
height: 0;
transform: translate(-50%, -50%) rotate(-45deg);
}
.cmk-rotate-right:hover:before {
height: 300%;
}
.cmk-bounce-left,
.cmk-bounce-right,
.cmk-bounce-up,
.cmk-bounce-down {
position: relative;
background-color: #f2295b;
color: #fff;
text-decoration: none;
transition: color 0.4s linear;	
z-index: 5;
}
.cmk-bounce-left:hover,
.cmk-bounce-right:hover,
.cmk-bounce-up:hover,
.cmk-bounce-down:hover {
color: #fff;
}
.cmk-bounce-left:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #f2295b;
color: #fff;
z-index: -1;
transition: transform 0.5s;
transform-origin: 0 0;
transition-timing-function: cubic-bezier(0.5,1.6,0.4,0.7);
transform: scaleX(0);
}
.cmk-bounce-right:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #f2295b;
color: #fff;
z-index: -1;
transition: transform 0.5s;
transform-origin: 100% 0;
transition-timing-function: cubic-bezier(0.5,1.6,0.4,0.7);
transform: scaleX(0);
}
.cmk-bounce-up:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #f2295b;
color: #fff;
z-index: -1;
transition: transform 0.5s;
transform-origin: 0 100%;
transition-timing-function: cubic-bezier(0.5,1.6,0.4,0.7);
transform: scaleY(0);
}
.cmk-bounce-down::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #f2295b;
color: #fff;
z-index: -1;
transition: transform 0.5s;
transform-origin: 0 0;
transition-timing-function: cubic-bezier(0.5,1.6,0.4,0.7);
transform: scaleY(0);
}
.cmk-bounce-left:hover:before,
.cmk-bounce-right:hover:before {
transform: scaleX(1);
}
.cmk-bounce-up:hover:before,
.cmk-bounce-down:hover:before {
transform: scaleY(1);
}
.cmk-double-slide-left,
.cmk-double-slide-right,
.cmk-double-slide-up,
.cmk-double-slide-down {
display: inline-block;
color: #fff;
text-decoration: none;
position: relative;
overflow: hidden;
z-index: 5;
transition: .3s;
}
.cmk-double-slide-left:hover,
.cmk-double-slide-right:hover,
.cmk-double-slide-up:hover,
.cmk-double-slide-down:hover {
color: #fff;
}
.cmk-double-slide-left:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
background-color: #f2295b;
color: #fff;
opacity: .5;
top: 0;
left: -100%;
transition: .3s;
z-index: -1;
}
.cmk-double-slide-left:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
background-color: #f2295b;
color: #fff;
top: 0;
left: -100%;
transition: .3s;
transition-delay: .2s;
z-index: -1;
}
.cmk-double-slide-left:hover:before,
.cmk-double-slide-left:hover:after {
left: 0;
}
.cmk-double-slide-right:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
background-color: #f2295b;
color: #fff;
opacity: .5;
right: -100%;
bottom: 0;
transition: .3s;
z-index: -1;
}
.cmk-double-slide-right:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
background-color: #f2295b;
color: #fff;
right: -100%;
bottom: 0;
transition: .3s;
transition-delay: .2s;
z-index: -1;
}
.cmk-double-slide-right:hover:before,
.cmk-double-slide-right:hover:after {
right: 0;
}
.cmk-double-slide-up:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
background-color: #f2295b;
color: #fff;
opacity: .5;
top: 100%;
left: 0;
transition: .3s;
z-index: -1;
}
.cmk-double-slide-up:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
background-color: #f2295b;
color: #fff;
top: 100%;
left: 0;
transition: .3s;
transition-delay: .2s;
z-index: -1;
}
.cmk-double-slide-up:hover:before,
.cmk-double-slide-up:hover:after {
top: 0;
}
.cmk-double-slide-down:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
background-color: #f2295b;
color: #fff;
opacity: .5;
top: -100%;
left: 0;
transition: .3s;
z-index: -1;
}
.cmk-double-slide-down:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
background-color: #f2295b;
color: #fff;
top: -100%;
left: 0;
transition: .3s;
transition-delay: .2s;
z-index: -1;
}
.cmk-double-slide-down:hover:before,
.cmk-double-slide-down:hover:after {
top: 0;
}
.cmk-line-in-vertical,
.cmk-line-out-vertical,
.cmk-line-in-horizontal,
.cmk-line-out-horizontal {
display: inline-block;
color: #fff;
position: relative;
overflow: hidden;
text-decoration: none;
z-index: 1;
}
.cmk-line-out-vertical {
color: #fff;
}
.cmk-line-in-vertical:hover,
.cmk-line-out-vertical:hover,
.cmk-line-in-horizontal:hover,
.cmk-line-out-horizontal:hover {
color: #fff;
transition: .5s;
}
.cmk-line-in-vertical:before {
content: "";
width: 100%;
height: 5%;
background-color: #f2295b;
color: #fff;
position: absolute;
left: 0;
top: -100%;
z-index: -1;
transition: .5s;
opacity: 0;
}
.cmk-line-in-vertical:after {
content: "";
width: 100%;
height: 5%;
background-color: #f2295b;
color: #fff;
position: absolute;
right: 0;
bottom: -100%;
z-index: -1;
transition: .5s;
opacity: 0;
}
.cmk-line-in-vertical:hover:before {
top: 0;
transition: .5s;
opacity: 1;
}
.cmk-line-in-vertical:hover:after {
bottom: 0;
transition: .5s;
opacity: 1;
}
.cmk-line-out-vertical:before {
content: "";
width: 100%;
height: 50%;
background-color: #f2295b;
color: #fff;
position: absolute;
left: 0;
top: 0;
z-index: -1;
transition: .5s;
opacity: 1;
}
.cmk-line-out-vertical:after {
content: "";
width: 100%;
height: 50%;
background-color: #f2295b;
color: #fff;
position: absolute;
right: 0;
bottom: 0;
z-index: -1;
transition: .5s;
opacity: 1;
}
.cmk-line-out-vertical:hover:before {
height: 5%;
top: 0;
transition: .5s;
opacity: 1;
}
.cmk-line-out-vertical:hover:after {
height: 5%;
bottom: 0;
transition: .5s;
opacity: 1;
}
.cmk-line-in-horizontal:before {
background-color: #f2295b;
color: #fff;
position: absolute;
content: "";
width: 50%;
height: 5%;
left: -50%;
bottom: 0;
z-index: -1;
transition: .5s;
opacity: 0;
}
.cmk-line-in-horizontal:after {
background-color: #f2295b;
color: #fff;
position: absolute;
content: "";
width: 50%;
height: 5%;
right: -50%;
bottom: 0;
z-index: -1;
transition: .5s;
opacity: 0;
}
.cmk-line-in-horizontal:hover:before {
left: 0;
transition: .5s;
opacity: 1;
}
.cmk-line-in-horizontal:hover:after {
right: 0;
transition: .5s;
opacity: 1;
}
.cmk-line-out-horizontal:before {
background-color: #f2295b;
color: #fff;
position: absolute;
content: "";
width: 50%;
height: 5%;
left: 0;
bottom: 0;
z-index: -1;
transition: .5s;
opacity: 1;
}
.cmk-line-out-horizontal:after {
background-color: #f2295b;
color: #fff;
position: absolute;
content: "";
width: 50%;
height: 5%;
right: 0;
bottom: 0;
z-index: -1;
transition: .5s;
opacity: 1;
}
.cmk-line-out-horizontal:hover:before {
left: -50%;
transition: .5s;
opacity: 0;
}
.cmk-line-out-horizontal:hover:after {
right: -50%;
transition: .5s;
opacity: 0;
}
.cmk-line-left,
.cmk-line-right {
display: inline-block;
color: #fff;
position: relative;
overflow: hidden;
text-decoration: none;
z-index: 5;
}
.cmk-line-left:hover,
.cmk-line-right:hover {
transition: .5s;
}
.cmk-line-left:before {
content: "";
width: 100%;
height: 5%;
background-color: #f2295b;
color: #fff;
position: absolute;
left: -100%;
bottom: 0;
z-index: -1;
transition: .5s;
opacity: 0;
}
.cmk-line-left:hover:before {
left: 0;
transition: .5s;
opacity: 1;
}
.cmk-line-right:before {
content: "";
width: 100%;
height: 5%;
background-color: #f2295b;
color: #fff;
position: absolute;
right: -100%;
bottom: 0;
z-index: -1;
transition: .5s;
opacity: 0;
}
.cmk-line-right:hover:before {
right: 0;
transition: .5s;
opacity: 1;
}
.cmk-lineout-horizontal {
color: #fff;
display: inline-block;
overflow: hidden;
position: relative;
text-decoration: none;
transition: 1s all ease;
}
.cmk-lineout-horizontal:before {
background: #f2295b;
color: #fff;
content: "";
position: absolute;
bottom: -1px;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
transition: all 0.6s ease;
}
.cmk-lineout-horizontal:hover {
transition: 1s all ease;
}
.cmk-lineout-horizontal:before {
width: 0;
height: 5%;
}
.cmk-lineout-horizontal:hover:before {
width: 100%;
}
.cmk-line-bounce-left,
.cmk-line-bounce-right {
position: relative;
text-decoration: none;
z-index: 6;
transition: color 0.4s linear;	
}
.cmk-line-bounce-left:hover,
.cmk-line-bounce-right:hover {
color: #fff;
}
.cmk-line-bounce-left:before {
content: "";
position: absolute;
left: 0;
width: 100%;
height: 5%;
bottom: 0;
background-color: #f2295b;
color: #fff;
z-index: -1;
transition: transform 0.5s;
transform-origin: 0 0;
transition-timing-function: cubic-bezier(0.5,1.6,0.4,0.7);
transform: scaleX(0);
}
.cmk-line-bounce-right:before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 5%;
background-color: #f2295b;
color: #fff;
z-index: -1;
transition: transform 0.5s;
transform-origin: 100% 0;
transition-timing-function: cubic-bezier(0.5,1.6,0.4,0.7);
transform: scaleX(0);
}
.cmk-line-bounce-left:hover:before,
.cmk-line-bounce-right:hover:before {
transform: scaleX(1);
}
.cmk-double-line-left,
.cmk-double-line-right {
display: inline-block;
color: #fff;
text-decoration: none;
position: relative;
overflow: hidden;
transition: .3s;
}
.cmk-double-line-left:hover,
.cmk-double-line-right:hover {
color: #fff;
}
.cmk-double-line-left:before {
content: '';
width: 100%;
height: 5%;
position: absolute;
background: #f2295b;
color: #fff;
opacity: .5;
left: -100%;
bottom: 0;
transition: .3s;
z-index: -1;
}
.cmk-double-line-left:after {
content: '';
width: 100%;
height: 5%;
position: absolute;
background: #f2295b;
color: #fff;
left: -100%;
bottom: 0;
transition: .3s;
transition-delay: .2s;
z-index: -1;
}
.cmk-double-line-left:hover:before,
.cmk-double-line-left:hover:after {
left: 0;
}
.cmk-double-line-right:before {
content: '';
width: 100%;
height: 5%;
position: absolute;
background: #f2295b;
color: #fff;
opacity: .5;
right: -100%;
bottom: 0;
transition: .3s;
z-index: -1;
}
.cmk-double-line-right:after {
content: '';
width: 100%;
height: 5%;
position: absolute;
background: #f2295b;
color: #fff;
right: -100%;
bottom: 0;
transition: .3s;
transition-delay: .2s;
z-index: -1;
}
.cmk-double-line-right:hover:before,
.cmk-double-line-right:hover:after {
right: 0;
}
.cmk-wave {
display: inline-block;
position: relative;
text-decoration: none;
box-sizing: border-box;
overflow: hidden;
}
.cmk-wave-text {
position: relative;
z-index: 5;
color: #fff;
}
.wave {
position: absolute;
left: 0;
top: -80px;
width: 200px;
height: 200px;
background-color: #f2295b;
color: #fff;
box-shadow: inset 0 0 50px rgba(0,0,0,.5);
transition: 0.5s;
}
.cmk-wave:hover .wave {
top: -120px;
}
.wave:before,
.wave:after {
content: '';
position: absolute;
width: 200%;
height: 200%;
top: 0;
left: 50%;
transform: translate(-50%, -75%);
}
.wave:before {
border-radius: 45%;
background-color: rgba(20,20,20,1);
color: #fff;
animation: animate 5s linear infinite;
}
.wave:after {
border-radius: 40%;
background-color: rgba(20,20,20,0.5);
color: #fff;
animation: animate 10s linear infinite;
}
@keyframes animate {
0% 
{
transform: translate(-50%, -75%) rotate(0deg);
}
100% 
{
transform: translate(-50%, -75%) rotate(360deg);
}
}.cmk-shadow-1 {
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.cmk-shadow-2 {
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.cmk-shadow-3 {
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}
.cmk-shadow-4 {
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.cmk-shadow-5 {
box-shadow: 0 10px 6px -6px #777
}
.cmk-shadow-6 {
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.cmk-shadow-7 {
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
.cmk-shadow-8 {
box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
}
.cmk-shadow-9 {
box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}
.cmk-shadow-10 {
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}
.cmk-shadow-11 {
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}
.cmk-shadow-12 {
box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.9) 0px 0px 0px 1px;
}
.cmk-shadow-13 {
box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}
.cmk-shadow-14 {
box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
}
.cmk-shadow-15 {
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}
.cmk-shadow-16 {
box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px;
}
.cmk-shadow-17 {
box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
}
.cmk-shadow-18 {
box-shadow: rgba(0, 0, 0, 0.4) 0px 30px 90px;
}
.cmk-shadow-19 {
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
.cmk-shadow-20 {
box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
.cmk-shadow-21 {
box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}
.cmk-shadow-22 {
box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
}
.cmk-shadow-23 {
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}
.cmk-shadow-24 {
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
.cmk-shadow-25 {
box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
}
.cmk-shadow-26 {
box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}
.cmk-shadow-27 {
box-shadow: rgba(0, 0, 0, 0.2) 0px 60px 40px -7px;
}
.cmk-shadow-28 {
box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}
.cmk-shadow-29 {
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.cmk-shadow-30 {
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}
.cmk-shadow-31 {
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}
.cmk-shadow-32 {
box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}
.cmk-shadow-33 {
box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}
.cmk-shadow-34 {
box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}
.cmk-shadow-35 {
box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;
}
.cmk-shadow-36 {
box-shadow: rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px;
}
.cmk-shadow-37 {
box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;
}
.cmk-shadow-38 {
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}
.cmk-shadow-39 {
box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}
.cmk-shadow-40 {
box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
}
.cmk-shadow-41 {
box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
}
.cmk-shadow-42 {
box-shadow: rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px, rgba(17, 17, 26, 0.1) 0px 24px 80px;
}
.cmk-shadow-43 {
box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
}
.cmk-shadow-44 {
box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}
.cmk-shadow-45 {
box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}
.cmk-shadow-46 {
box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
}
.cmk-shadow-47 {
box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
}
.cmk-shadow-48 {
box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 48px;
}
.cmk-shadow-49 {
box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}
.cmk-shadow-50 {
box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
} 
.cmk-shadow-51 {
box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
}
.cmk-shadow-52 {
box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
}
.cmk-shadow-53 {
box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
}
.cmk-shadow-54 {
box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
}
.cmk-shadow-55 {
box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;
}
.cmk-shadow-56 {
box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
}.timeline{-webkit-box-sizing:border-box;box-sizing:border-box;position:relative}.timeline *,.timeline :after,.timeline :before{-webkit-box-sizing:inherit;box-sizing:inherit}.timeline:not(.timeline--horizontal):before{background-color:#ddd;bottom:0;content:'';left:50%;margin-left:-2px;position:absolute;top:0;width:4px;z-index:1}.timeline__wrap{overflow:hidden;position:relative;z-index:2}.timeline__item{font-size:16px;font-size:1rem;padding:.625rem 2.5rem .625rem 0;position:relative;width:50%;z-index:2}.timeline__item:after{background-color:#fff;border:4px solid #ddd;border-radius:50%;content:'';height:20px;position:absolute;right:-10px;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);top:50%;width:20px;z-index:1}.timeline__item.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;opacity:0}.timeline__item.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}.timeline__item--left{left:0}.timeline__item--right{left:50%;padding:.625rem 0 .625rem 2.5rem}.timeline__item--right:after{left:-10px}.timeline__item--right .timeline__content:before{border-bottom:10px solid transparent;border-right:12px solid #ccc;border-left:none;border-top:10px solid transparent;left:-12px}.timeline__item--right .timeline__content:after{border-bottom:9px solid transparent;border-right:11px solid #fff;border-left:none;border-top:9px solid transparent;left:-10px}.timeline__content{background-color:#fff;border:1px solid #ccc;border-radius:10px;color:#333;display:block;padding:1.25rem;position:relative}.timeline__content:after,.timeline__content:before{content:'';height:0;position:absolute;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);top:50%;width:0}.timeline__content:before{border-bottom:10px solid transparent;border-left:12px solid #ccc;border-top:10px solid transparent;right:-12px;z-index:1}.timeline__content:after{border-bottom:9px solid transparent;border-left:11px solid #fff;border-top:9px solid transparent;right:-10px;z-index:2}.timeline__content h2{font-size:1.25rem;font-weight:700;margin:0 0 .625rem}.timeline__content p{font-size:.9375rem;line-height:1.5;margin-bottom:10px}.timeline--horizontal{font-size:0;padding:0 3.125rem;overflow:hidden;white-space:nowrap}.timeline--horizontal .timeline-divider{background-color:#ddd;display:block;height:4px;left:40px;position:absolute;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);right:40px;z-index:1}.timeline--horizontal .timeline__items{-webkit-transition:all .8s;-o-transition:all .8s;transition:all .8s;will-change:transform}.timeline--horizontal .timeline__item{display:inline-block;left:0;padding:0 0 2.5rem;position:relative;-webkit-transition:none;-o-transition:none;transition:none;vertical-align:top;white-space:normal}.timeline--horizontal .timeline__item:after{left:50%;right:auto;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);top:100%}.timeline--horizontal .timeline__item .timeline__item__inner{display:table;height:100%;width:100%}.timeline--horizontal .timeline__item .timeline__content__wrap{display:table-cell;margin:0;padding:0;vertical-align:bottom}.timeline--horizontal .timeline__item .timeline__content:before{border-left:12px solid transparent;border-right:12px solid transparent;border-top:12px solid #ccc;left:50%;right:auto;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);top:100%}.timeline--horizontal .timeline__item .timeline__content:after{border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #fff;left:50%;right:auto;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);top:100%}.timeline--horizontal .timeline__item--bottom{padding:2.5rem 0 0}.timeline--horizontal .timeline__item--bottom:after{top:0}.timeline--horizontal .timeline__item--bottom .timeline__content__wrap{vertical-align:top}.timeline--horizontal .timeline__item--bottom .timeline__content:before{border-bottom:12px solid #ccc;border-left:12px solid transparent;border-right:12px solid transparent;border-top:none;bottom:100%;top:auto}.timeline--horizontal .timeline__item--bottom .timeline__content:after{border-bottom:10px solid #fff;border-left:10px solid transparent;border-right:10px solid transparent;border-top:none;bottom:100%;top:auto}.timeline-nav-button{background-color:#fff;border:2px solid #ddd;border-radius:50px;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:none;box-shadow:none;cursor:pointer;display:block;height:40px;outline:0;position:absolute;text-indent:-9999px;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);top:50%;width:40px;z-index:10}.timeline-nav-button:disabled{opacity:.5;pointer-events:none}.timeline-nav-button:before{background-position:center center;background-repeat:no-repeat;content:'';display:block;height:14px;left:50%;position:absolute;-webkit-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);top:50%;width:8px}.timeline-nav-button--prev{left:0}.timeline-nav-button--prev:before{background-image:url(//firstbornprogram.org/wp-content/plugins/osteo-timeline-for-wpbakery/assets/vendor/images/arrow-left.svg)}.timeline-nav-button--next{right:0}.timeline-nav-button--next:before{background-image:url(//firstbornprogram.org/wp-content/plugins/osteo-timeline-for-wpbakery/assets/vendor/images/arrow-right.svg)}.timeline--mobile{padding:0}.timeline--mobile:before{left:10px!important;margin:0!important}.timeline--mobile .timeline__item{left:0;padding-left:40px;padding-right:0;width:100%}.timeline--mobile .timeline__item:after{left:2px;margin:0}.timeline--mobile .timeline__item .timeline__content:before{left:-12px;border-bottom:12px solid transparent;border-right:12px solid #ccc;border-left:none;border-top:12px solid transparent}.timeline--mobile .timeline__item .timeline__content:after{left:-10px;border-bottom:10px solid transparent;border-right:10px solid #fff;border-left:none;border-top:10px solid transparent}@-webkit-keyframes fadeIn{0%{opacity:0;top:70px}100%{opacity:1;top:0}}@keyframes fadeIn{0%{opacity:0;top:70px}100%{opacity:1;top:0}}@-webkit-keyframes liftUp{0%{top:0}100%{top:-15px}}@keyframes liftUp{0%{top:0}100%{top:-15px}}body {
display: flex;
flex-direction: column;
}
.osteo-timeline-style-1 {
max-width: 100%;
margin: auto;
display: flex;
flex-wrap: wrap;
position: relative;
}
.osteo-timeline-style-1::before {
content: '';
position: absolute;
width: 2px;
height: 100%;
background-color: #2196F3;
left: calc(50% - 1px);
}
.osteo-timeline-style-1 .timeline-item .timeline-date {
padding: 6px 0px 0px 0px;
font-weight: 700;
}
.osteo-timeline-style-1 .timeline-item {
margin-bottom: 40px;
width: 100%;
position: relative;
}
.osteo-timeline-style-1 .timeline-item .timeline-content img {
margin-top: 20px;
margin-bottom: 15px;
}
.osteo-timeline-style-1 .timeline-item:last-child {
margin-bottom: 0;
}
.osteo-timeline-style-1 .timeline-item:nth-child(odd) {
padding-right: calc(50% + 30px);
text-align: right;
}
.osteo-timeline-style-1 .timeline-item:nth-child(even) {
padding-left: calc(50% + 30px);
}
.osteo-timeline-style-1 .timeline-dot {
height: 10px;
width: 10px;
background-color: #8BC34A;
position: absolute;
left: calc(50% - 5px);
border-radius: 50%;
top: 10px;
} .osteo-timeline-style-2 {
max-width: 100%;
margin: 50px auto;
padding: 0 20px;
position: relative;
}
.osteo-timeline-style-2 .center-line {
position: absolute;
height: 100%;
width: 4px;
background: #03A9F4;
left: 50%;
top: 20px;
transform: translateX(-50%);
}
.osteo-timeline-style-2 .timeline-items {
display: flex;
}
.osteo-timeline-style-2 .left {
justify-content: flex-start;
}
.osteo-timeline-style-2 .right {
justify-content: flex-end;
}
.osteo-timeline-style-2 .timeline-items .timeline-item {
background: #2196F3;
border-radius: 5px;
width: calc(50% - 40px);
padding: 20px;
position: relative;
margin-bottom: 30px;
}
.osteo-timeline-style-2 .timeline-items .timeline-item .timeline-content img {
margin-bottom: 20px;
}
.osteo-timeline-style-2 .timeline-items .timeline-item .timeline-content p {
color: #fff;
padding-bottom: 20px;
}
.osteo-timeline-style-2 .timeline-items .timeline-item .timeline-date {
font-size: 16px;
font-weight: 700;
color: #fff;
}
.osteo-timeline-style-2 .timeline-items .timeline-item .timeline-content h2 {
color: #fff;
font-weight: 700;
padding: 20px 0;
}
.osteo-timeline-style-2 .timeline-items .timeline-item::before {
position: absolute;
content: "";
height: 15px;
width: 15px;
background: #2196F3;
top: 28px;
z-index: -1;
transform: rotate(45deg);
}
.osteo-timeline-style-2 .left .timeline-item::before {
right: -7px;
}
.osteo-timeline-style-2 .right .timeline-item::before {
left: -7px;
}
.osteo-timeline-style-2 .timeline-icon i {
font-size: 16px;
}
.osteo-timeline-style-2 .timeline-items .timeline-item .timeline-icon {
position: absolute;
background: #2196F3;
height: 40px;
width: 40px;
text-align: center;
line-height: 40px;
border-radius: 50%;
color: #fff;
font-size: 17px;
}
.osteo-timeline-style-2 .left .timeline-item .timeline-icon {
top: 15px;
right: -60px;
}
.osteo-timeline-style-2 .right .timeline-item .timeline-icon {
top: 15px;
left: -60px;
}
.osteo-timeline-style-2 .line-effect-2 {
background: red!important;
transition: .9s;
position: absolute;
height: 100%;
width: 4px;
left: 50%;
top: 20px;
transform: translateX(-50%);
} .osteo-timeline-style-3 {
position: relative;
width: 100%;
max-width: 1140px;
margin: 0 auto;
padding: 15px 0;
}
.osteo-timeline-style-3::after {
content: '';
position: absolute;
width: 2px;
background: #2196F3;
top: 0;
bottom: 0;
left: 50%;
margin-left: -1px;
}
.osteo-timeline-style-3 .timeline-items {
padding: 15px 30px;
position: relative;
background: inherit;
width: 50%;
}
.osteo-timeline-style-3 .timeline-items.left {
left: 0;
}
.osteo-timeline-style-3 .timeline-items.right {
left: 50%;
}
.osteo-timeline-style-3 .timeline-items::after {
content: '';
position: absolute;
width: 16px;
height: 16px;
top: calc(50% - 8px);
right: -8px;
background: #ffffff;
border: 2px solid #2196F3;
border-radius: 16px;
z-index: 1;
}
.osteo-timeline-style-3 .timeline-items.right::after {
left: -8px;
}
.osteo-timeline-style-3 .timeline-items.right::before {
left: 8px;
}
.osteo-timeline-style-3 .timeline-items .timeline-date {
position: absolute;
display: inline-block;
top: calc(50% - 8px);
text-align: center;
font-size: 14px;
font-weight: bold;
color: #222;
letter-spacing: 1px;
z-index: 1;
}
.osteo-timeline-style-3 .timeline-items.left .timeline-date {
right: -75px;
}
.osteo-timeline-style-3 .timeline-items.right .timeline-date {
left: -75px;
}
.osteo-timeline-style-3 .timeline-items .timeline-content {
padding: 30px;
background: #2196F3;
position: relative;
}
.osteo-timeline-style-3 .timeline-items.right .timeline-content {
padding: 30px;
}
.osteo-timeline-style-3 .timeline-items .timeline-content img {
margin-bottom: 20px;
}
.osteo-timeline-style-3 .timeline-items .timeline-content h2 {
padding-bottom: 15px;
font-weight: 700;
color: #fff;
}
.osteo-timeline-style-3 .timeline-items .timeline-content p {
font-size: 16px;
line-height: 22px;
color: #fff;
padding-bottom: 15px;
} .osteo-timeline-style-4 {
display: flex;
flex-direction: column;
position: relative;
}
.osteo-timeline-style-4 .timeline-items {
margin-bottom: 20px;
position: relative;
display: flex;
border-radius: 6px;
align-self: center;
width: 50vw;
}
.osteo-timeline-style-4 .timeline-items:nth-child(2n + 1) {
flex-direction: row-reverse;
}
.osteo-timeline-style-4 .timeline-items:nth-child(2n + 1) .timeline-date {
border-radius: 0 6px 6px 0;
}
.osteo-timeline-style-4 .timeline-items:nth-child(2n + 1) .timeline-content {
border-radius: 6px 0 0 6px;
}
.osteo-timeline-style-4 .timeline-items:nth-child(2n + 1) .timeline-icon:before {
content: "";
width: 2px;
height: 100%;
background: #03A9F4;
position: absolute;
top: 0%;
left: 50%;
right: auto;
z-index: -1;
transform: translateX(-50%);
animation: fillTop 2s forwards 4s ease-in-out;
}
.osteo-timeline-style-4 .timeline-items:nth-child(2n + 1) .timeline-icon:after {
content: "";
width: 100%;
height: 2px;
background: #03A9F4;
position: absolute;
right: 0;
z-index: -1;
top: 50%;
left: auto;
transform: translateY(-50%);
animation: fillLeft 2s forwards 4s ease-in-out;
}
.osteo-timeline-style-4 .timeline-items .timeline-content h2 {
line-height: 1.4;
font-weight: 700;
color: #03A9F4;
letter-spacing: 1.5px;
padding-top: 20px;
}
.osteo-timeline-style-4 .timeline-items .timeline-content {
padding: 20px;
box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3), 0 -12px 36px -8px rgba(0, 0, 0, 0.025);
background: #fff;
width: calc(40vw - 84px);
border-radius: 0 6px 6px 0;
}
.osteo-timeline-style-4 .timeline-items .timeline-date {
color: #fff;
font-size: 1.5rem;
font-weight: 600;
background: #2196F3;
display: flex;
align-items: center;
justify-content: center;
white-space: nowrap;
padding: 0 20px;
border-radius: 6px 0 0 6px;
}
.osteo-timeline-style-4 .timeline-items .timeline-icon {
display: flex;
align-items: center;
justify-content: center;
color: #03A9F4;
padding: 20px;
align-self: center;
margin: 0 20px;
background: #03A9F4;
border-radius: 100%;
width: 40px;
box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3), 0 -12px 36px -8px rgba(0, 0, 0, 0.025);
padding: 40px;
height: 40px;
position: relative;
}
.osteo-timeline-style-4 .timeline-items .timeline-icon i {
font-size: 24px;
color: #fff;
}
.osteo-timeline-style-4 .timeline-items .timeline-icon:before {
content: "";
width: 2px;
height: 100%;
background: #03A9F4;
position: absolute;
top: 0%;
z-index: -1;
left: 50%;
transform: translateX(-50%);
animation: fillTop 2s forwards 4s ease-in-out;
}
.osteo-timeline-style-4 .timeline-items .timeline-icon:after {
content: "";
width: 100%;
height: 2px;
background: #03A9F4;
position: absolute;
left: 0%;
z-index: -1;
top: 50%;
transform: translateY(-50%);
animation: fillLeftOdd 2s forwards 4s ease-in-out;
}
.osteo-timeline-style-4 .timeline-items .timeline-content p {
flex-basis: 60%;
padding: 16px 0;
margin: 0;
}
.osteo-timeline-style-4 .timeline-items:last-child .timeline-icon:before {
content: none;
}
@keyframes fillLeft {
100% {
right: 100%;
}
}
@keyframes fillTop {
100% {
top: 100%;
}
}
@keyframes fillLeftOdd {
100% {
left: 100%;
}
} .osteo-timeline-style-5 {
max-width: 100%;
width: 100%;
}
.osteo-timeline-style-5 .timeline-item {
padding: 0px 32px 32px;
position: relative;
color: rgba(0, 0, 0, .7);
border-left: 2px solid #2196F3;
}
.osteo-timeline-style-5 .timeline-item .timeline-date {
padding-bottom: 20px;
font-weight: 700;
}
.osteo-timeline-style-5 .timeline-item .timeline-content {
background-color: #2196F3;
padding: 30px;
}
.osteo-timeline-style-5 .timeline-item .timeline-content img {
margin-bottom: 20px;
}
.osteo-timeline-style-5 .timeline-item .timeline-content h2 {
color: #fff;
}
.osteo-timeline-style-5 .timeline-item .timeline-content p {
font-size: 16px;
color: #fff;
padding: 15px 0;
margin: 0;
}
.osteo-timeline-style-5 .timeline-item::before {
content: attr(date-is);
position: absolute;
left: 24px;
font-weight: bold;
top: 16px;
display: block;
font-weight: 700;
font-size: 13px;
}
.osteo-timeline-style-5 .timeline-item::after {
width: 10px;
height: 10px;
display: block;
top: 0px;
position: absolute;
left: -7px;
border-radius: 10px;
content: '';
border: 2px solid #2196F3;
background: white;
} .osteo-timeline-style-6 {
position: relative;
width: 100%;
max-width: 1140px;
margin: 0 auto;
padding: 15px 0;
}
.osteo-timeline-style-6::after {
content: '';
position: absolute;
width: 2px;
background: #2196F3;
top: 0;
bottom: 0;
right: 9.9%;
margin-left: -1px;
}
.osteo-timeline-style-6 .timeline-items {
padding: 15px 30px;
position: relative;
background: inherit;
width: 90%;
}
.osteo-timeline-style-6 .timeline-items.left {
left: 0;
}
.osteo-timeline-style-6 .timeline-items::after {
content: '';
position: absolute;
width: 16px;
height: 16px;
top: calc(50% - 8px);
right: -8px;
background: #ffffff;
border: 2px solid #2196F3;
border-radius: 16px;
z-index: 1;
}
.osteo-timeline-style-6 .timeline-items .timeline-date {
position: absolute;
display: inline-block;
top: calc(50% - 8px);
text-align: center;
font-size: 14px;
font-weight: bold;
color: #222;
letter-spacing: 1px;
z-index: 1;
}
.osteo-timeline-style-6 .timeline-items.left .timeline-date {
right: -75px;
}
.osteo-timeline-style-6 .timeline-items .timeline-content {
padding: 30px;
background: #E91E63;
position: relative;
}
.osteo-timeline-style-6 .timeline-items .timeline-content img {
margin-bottom: 20px;
}
.osteo-timeline-style-6 .timeline-items .timeline-content h2 {
padding-bottom: 15px;
font-weight: 700;
color: #fff;
}
.osteo-timeline-style-6 .timeline-items .timeline-content p {
font-size: 16px;
line-height: 22px;
color: #fff;
padding-bottom: 15px;
} .osteo-timeline-style-7 {
position: relative;
width: 100%;
max-width: 1140px;
margin: 0 auto;
padding: 15px 0;
}
.osteo-timeline-style-7::after {
content: '';
position: absolute;
width: 2px;
background: #2196F3;
top: 0;
bottom: 0;
left: 10%;
margin-left: -1px;
}
.osteo-timeline-style-7 .timeline-items {
padding: 15px 30px;
position: relative;
background: inherit;
width: 90%;
}
.osteo-timeline-style-7 .timeline-items.right {
left: 10%;
}
.osteo-timeline-style-7 .timeline-items::after {
content: '';
position: absolute;
width: 16px;
height: 16px;
top: calc(50% - 8px);
right: -8px;
background: #ffffff;
border: 2px solid #2196F3;
border-radius: 16px;
z-index: 1;
}
.osteo-timeline-style-7 .timeline-items.right::after {
left: -8px;
}
.osteo-timeline-style-7 .timeline-items.right::before {
left: 8px;
}
.osteo-timeline-style-7 .timeline-items .timeline-date {
position: absolute;
display: inline-block;
top: calc(50% - 8px);
text-align: center;
font-size: 14px;
font-weight: bold;
color: #222;
letter-spacing: 1px;
z-index: 1;
}
.osteo-timeline-style-7 .timeline-items.right .timeline-date {
left: -75px;
}
.osteo-timeline-style-7 .timeline-items .timeline-content {
padding: 30px;
background: #E91E63;
position: relative;
}
.osteo-timeline-style-7 .timeline-items.right .timeline-content {
padding: 30px;
}
.osteo-timeline-style-7 .timeline-items .timeline-content img {
margin-bottom: 20px;
}
.osteo-timeline-style-7 .timeline-items .timeline-content h2 {
padding-bottom: 15px;
font-weight: 700;
color: #fff;
}
.osteo-timeline-style-7 .timeline-items .timeline-content p {
font-size: 16px;
line-height: 22px;
color: #fff;
padding-bottom: 15px;
} .timeline-nav-button {
background-color: #2196F3!important;
border-radius: 50px!important;
}
.timeline-nav-button:hover {
background-color: #E91E63!important;
}
.osteo-timeline-style-8 .timeline-date,
.osteo-timeline-style-9 .timeline-date {
padding-bottom: 15px;
font-size: 18px;
font-weight: 700;
}a.cmk-button:focus,
a.cmk-button:hover {
text-decoration: none!important;
}
.cmk-button {
display: inline-block;
background-color: #d30c5c;
color: #fff;
border-radius: 2px;
z-index: 5;
}
.cmk-button:hover {
border-radius: 2px;
}
.cmk-button:before {
border-radius: 2px;
}
.cmk-button:after {
border-radius: 2px;
}
.cmk-button-border {
border: 2px solid #d30c5c;
background-color: transparent;
color: #222;
display: inline-block;
border-radius: 2px;
z-index: 5;
}
.cmk-button-border:hover {
border-radius: 2px;
}
.cmk-button-border:before {
border-radius: 2px;
}
.cmk-button-border:after {
border-radius: 2px;
}
.before-icon i {
float: left;
padding: 5px 0;
padding-right: 10px;
}
.after-icon i {
float: right;
padding: 5px 0;
padding-left: 10px;
}
.cmk-button.xs,
.cmk-button-border.xs {
font-size: 13px;
padding: 8px 20px;
}
.cmk-button.sm,
.cmk-button-border.sm {
font-size: 15px;
padding: 8px 24px;
}
.cmk-button.md,
.cmk-button-border.md {
font-size: 15px;
padding: 12px 32px;
}
.cmk-button.lg,
.cmk-button-border.lg {
font-size: 18px;
padding: 15px 40px;
}
.cmk-button.xl,
.cmk-button-border.xl {
font-size: 20px;
padding: 20px 50px;
}
.timeline__content img {
margin-bottom: 20px;
}
.timeline__content h2 {
margin-bottom: 20px;
}
.timeline__content p {
margin-bottom: 20px;
}
.timeline-nav-button {
outline: none!important;
}
.osteo-timeline-style-1,
.osteo-timeline-style-2,
.osteo-timeline-style-3,
.osteo-timeline-style-4,
.osteo-timeline-style-5,
.osteo-timeline-style-6,
.osteo-timeline-style-7,
.osteo-timeline-style-1 .timeline-content h2,
.osteo-timeline-style-2 .timeline-content h2,
.osteo-timeline-style-3 .timeline-content h2,
.osteo-timeline-style-4 .timeline-content h2,
.osteo-timeline-style-5 .timeline-content h2,
.osteo-timeline-style-6 .timeline-content h2,
.osteo-timeline-style-7 .timeline-content h2,
.osteo-timeline-style-8 .timeline__content h2,
.osteo-timeline-style-1 .cmk-button,
.osteo-timeline-style-2 .cmk-button,
.osteo-timeline-style-3 .cmk-button,
.osteo-timeline-style-4 .cmk-button,
.osteo-timeline-style-5 .cmk-button,
.osteo-timeline-style-6 .cmk-button,
.osteo-timeline-style-7 .cmk-button,
.osteo-timeline-style-8 .cmk-button,
.osteo-timeline-style-1 .cmk-button:before,
.osteo-timeline-style-2 .cmk-button:before,
.osteo-timeline-style-3 .cmk-button:before,
.osteo-timeline-style-4 .cmk-button:before,
.osteo-timeline-style-5 .cmk-button:before,
.osteo-timeline-style-7 .cmk-button:before,
.osteo-timeline-style-8 .cmk-button:before,
.osteo-timeline-style-1 .cmk-button:after,
.osteo-timeline-style-2 .cmk-button:after,
.osteo-timeline-style-3 .cmk-button:after,
.osteo-timeline-style-4 .cmk-button:after,
.osteo-timeline-style-5 .cmk-button:after,
.osteo-timeline-style-6 .cmk-button:after,
.osteo-timeline-style-7 .cmk-button:after,
.osteo-timeline-style-8 .cmk-button:after,
.timeline-nav-button,
.timeline-nav-button:hover,
.cmk-button:hover {
transition: .5s;
}
.osteo-timeline-style-1 .timeline-content h2,
.osteo-timeline-style-2 .timeline-content h2,
.osteo-timeline-style-3 .timeline-content h2,
.osteo-timeline-style-4 .timeline-content h2,
.osteo-timeline-style-5 .timeline-content h2,
.osteo-timeline-style-6 .timeline-content h2,
.osteo-timeline-style-7 .timeline-content h2,
.osteo-timeline-style-8 .timeline__content h2 {
margin: 0;
font-weight: 700;
font-size: 30px;
}
.osteo-timeline-style-1 .timeline-content p,
.osteo-timeline-style-2 .timeline-content p,
.osteo-timeline-style-3 .timeline-content p,
.osteo-timeline-style-4 .timeline-content p,
.osteo-timeline-style-5 .timeline-content p,
.osteo-timeline-style-6 .timeline-content p,
.osteo-timeline-style-7 .timeline-content p,
.osteo-timeline-style-8 .timeline__content p {
font-size: 14px;
}@media(max-width: 767px) {
.osteo-timeline-style-1::before {
left: 7px;
}
.osteo-timeline-style-1 .timeline-item:nth-child(odd) {
padding-right: 0;
text-align: left;
}
.osteo-timeline-style-1 .timeline-item:nth-child(odd),
.osteo-timeline-style-1 .timeline-item:nth-child(even) {
padding-left: 37px;
}
.osteo-timeline-style-1 .timeline-dot {
left: 3px;
}
.osteo-timeline-style-3 .timeline-items .timeline-date {
top: calc(50% - 15px);
}
.osteo-timeline-style-3::after {
left: 90px;
}
.osteo-timeline-style-3 .timeline-items {
width: 100%;
padding-left: 120px;
padding-right: 30px;
}
.osteo-timeline-style-3 .timeline-items.right {
left: 0%;
}
.osteo-timeline-style-3 .timeline-items.left::after,
.osteo-timeline-style-3 .timeline-items.right::after {
left: 82px;
}
.osteo-timeline-style-3 .timeline-items.left::before,
.osteo-timeline-style-3 .timeline-items.right::before {
left: 100px;
border-color: transparent #006E51 transparent transparent;
}
.osteo-timeline-style-3 .timeline-items.left .timeline-date,
.osteo-timeline-style-3 .timeline-items.right .timeline-date {
right: auto;
left: 15px;
}
.osteo-timeline-style-3 .timeline-items.left .timeline-icon,
.osteo-timeline-style-3 .timeline-items.right .timeline-icon {
right: auto;
left: 146px;
}
.osteo-timeline-style-6 .timeline-items,
.osteo-timeline-style-7 .timeline-items {
width: 80%;
}
.osteo-timeline-style-6::after {
right: 19.9%;
}
.osteo-timeline-style-7::after {
left: 19.9%;
}
.osteo-timeline-style-7 .timeline-items.right {
left: 19.9%;
}
}
@media(max-width: 790px) {
.osteo-timeline-style-2 .center-line {
left: 40px;
}
.osteo-timeline-style-2 .timeline-items {
margin: 30px 0 3px 60px;
}
.osteo-timeline-style-2 .timeline-items .timeline-item {
width: 100%;
}
.osteo-timeline-style-2 .left .timeline-item::before {
left: -7px;
}
.osteo-timeline-style-2 .left .timeline-item .timeline-icon {
left: -60px;
}
.osteo-timeline-style-4 .timeline-items {
flex-direction: column;
align-self: center;
}
.osteo-timeline-style-4 .timeline-items .timeline-content {
width: 100%;
}
.osteo-timeline-style-4 .timeline-items .timeline-icon {
border-radius: 6px 6px 0 0;
width: 100%;
margin: 0;
box-shadow: none;
}
.osteo-timeline-style-4 .timeline-items .timeline-icon:before,
.osteo-timeline-style-4 .timeline-items .timeline-icon:after {
display: none;
}
.osteo-timeline-style-4 .timeline-items .timeline-date {
border-radius: 0;
padding: 6px 0px 0px 0px;
}
.osteo-timeline-style-4 .timeline-items:nth-child(2n + 1) {
flex-direction: column;
align-self: center;
}
.osteo-timeline-style-4 .timeline-items .timeline-items:nth-child(2n + 1) .timeline-date {
border-radius: 0;
padding: 20px;
}
.osteo-timeline-style-4 .timeline-items .timeline-items:nth-child(2n + 1) .timeline-icon {
border-radius: 6px 6px 0 0;
margin: 0;
}
.osteo-timeline-style-6 .timeline-items.left .timeline-date {
right: -60px;
}
.osteo-timeline-style-7 .timeline-items.right .timeline-date {
left: -60px;
}
}
@media(max-width: 440px) {
.osteo-timeline-style-2 .center-line,
.osteo-timeline-style-2 .center-line .center-line,
.timeline-items .timeline-item::before,
.timeline-items .timeline-item .timeline-icon {
display: none;
}
.osteo-timeline-style-2 .timeline-items {
margin: 10px 0;
}
}