ehub-style.css

<!-- Simple Custom CSS -->
<style type='text/css'>
/* Enter Your Custom CSS Here */
div.rounded-images img {
border-radius:50%
}

.pill {
background-color:#D3D3D3;
border:none;
color:#000;
padding:1px 14px;
text-align:center;
text-decoration:none;
display:inline-block;
font-size:12px;
margin:14px 2px;
border-radius:18px;
transition-duration:.4s
}

.btn-group .startup_sector_filter_button {
background-color:#fff;
border:1px solid #7C878E;
color:#000;
border-radius:6px;
padding:10px 32px;
margin-right:10px;
margin-bottom:5px;
text-align:center;
text-decoration:none;
display:inline-block;
font-size:16px;
cursor:pointer;
float:left
}

.btn-group .startup_sector_filter_button:hover {
background-color:#7C878E;
color:#fff;
transition-duration:.5s
}

div.parallax-container > img {
display:none
}

div.parallax-container {
min-height:500px
}

div.header-widget-area .table > thead > tr > th,div.header-widget-area .table > thead > tr > td,div.header-widget-area .table > tbody > tr > th,div.header-widget-area .table > tbody > tr > td,div.header-widget-area .table > tfoot > tr > th,div.header-widget-area .table > tfoot > tr > td {
border-top:0
}

function featuredtoRSS($content) {
ifhas_post_thumbnailpost-idcontent: . get_the_post_thumbnail($post->ID,'medium',array(style => 'margin-bottom: 15px;')) .  . $content
}
}

/*timeline*/
.timeline {
position:relative;
max-width:1200px;
margin:0 auto
}

/* The actual timeline (the vertical ruler) */
.timeline::after {
content:'';
position:absolute;
width:6px;
background-color:#fff;
top:3105px;
bottom:0;
left:50%;
margin-left:-3px
}

/* Container around content */
.container1 {
padding:10px 40px;
position:relative;
background-color:inherit;
width:50%
}

/* The circles on the timeline */
.container1::after {
content:'';
position:absolute;
width:25px;
height:25px;
right:-17px;
background-color:#fff;
border:4px solid #D3D3D3;
top:15px;
border-radius:50%;
z-index:1
}

/* Place the container to the left */
.left {
left:0
}

/* Place the container to the right */
.right {
left:50%
}

/* Add arrows to the left container (pointing right) */
.left::before {
content:" ";
height:0;
position:absolute;
top:22px;
width:0;
z-index:1;
right:30px;
border:medium solid #fff;
border-width:10px 0 10px 10px;
border-color:transparent transparent transparent #fff
}

/* Add arrows to the right container (pointing left) */
.right::before {
content:" ";
height:0;
position:absolute;
top:22px;
width:0;
z-index:1;
left:30px;
border:medium solid #fff;
border-width:10px 10px 10px 0;
border-color:transparent #fff transparent transparent
}

/* Fix the circle for containers on the right side */
.right::after {
left:-16px
}

/* The actual content */
.content {
padding:20px 30px;
background-color:#fff;
position:relative;
border-radius:6px
}

/* Horizontal Roadmap */
.roadmap {
width:100%;
height:480px;
padding:20px;
position:relative;
box-sizing:border-box;
overflow:auto;
display:flex
}

.roadmap-title {
font-size:1.5em;
font-weight:700;
margin-bottom:10px;
font-family:sans-serif
}

.roadmap-content {
max-width:300px;
height:300px;
padding:20px;
flex-shrink:0;
flex-grow:0;
align-self:flex-start;
background:#FFF;
position:relative;
border-radius:10px;
margin-right:10px;
box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)
}

.roadmap-content:before {
position:absolute;
width:calc(100% + 14px);
height:4px;
top:calc(100% + 8px);
background:#FFF;
content:"";
left:-7px;
border-radius:5px;
box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)
}

.roadmap-content:after {
position:absolute;
width:4px;
height:25px;
top:100%;
left:calc(50% - 10px);
background:#FFF;
content:"";
box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)
}

.roadmap-period {
position:absolute;
top:calc(100% + 25px);
background:#FFF;
padding:10px;
width:100px;
text-align:center;
border-radius:10px;
left:calc(50% - 60px);
box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)
}

.roadmap-period:before {
width:15px;
height:15px;
background:#fff;
border-radius:50%;
content:"";
position:absolute;
top:-20px;
left:calc(50% - 6px);
z-index:2
}

.roadmap-content:nth-child(even) {
align-self:flex-end
}

.roadmap-content:nth-child(even):before {
top:-15px
}

.roadmap-content:nth-child(even):after {
top:-25px
}

.roadmap-content:nth-child(even) .roadmap-period {
top:-60px
}

.roadmap-content:nth-child(even) .roadmap-period:before {
top:calc(100% + 2px)
}

.roadmap1 {
width:800px;
height:20px;
list-style:none;
text-align:justify;
margin:80px auto;
background:-webkit-gradient(left top,left bottom,color-stop(0%,rgba(255,255,255,0)),color-stop(45%,rgba(255,255,255,0)),color-stop(51%,rgba(191,128,11,1)),color-stop(57%,rgba(255,255,255,0)),color-stop(100%,rgba(255,255,255,0)));
background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 45%,rgba(191,128,11,1) 51%,rgba(255,255,255,0) 57%,rgba(255,255,255,0) 100%)
}

.roadmap1:after {
display:inline-block;
content:"";
width:100%
}

.roadmap1 li {
display:inline-block;
width:20px;
height:20px;
background:#F2BB13;
text-align:center;
line-height:1.2;
position:relative;
border-radius:50%
}

.roadmap1 li:before {
display:inline-block;
content:attr(data-step);
font-size:26px;
position:absolute;
left:50%;
transform:translateX(-50%)
}

.roadmap1 li:nth-child(odd):before {
top:-40px
}

.roadmap1 li:nth-child(even):before {
bottom:-40px
}

.roadmap1 li:after {
display:inline-block;
content:attr(data-text);
font-size:16px;
position:absolute;
left:50%;
transform:translateX(-50%)
}

.roadmap1 li:nth-child(odd):after {
bottom:0;
margin-bottom:-10px;
transform:translate(-50%,100%)
}

.roadmap1 li:nth-child(even):after {
top:0;
margin-top:-10px;
transform:translate(-50%,-100%)
}

/* --- Start progress bar --- */
.process-wrapper {
margin:auto;
max-width:1080px
}

#progress-bar-container {
position:relative;
width:90%;
margin:auto;
height:100px;
margin-top:65px
}

#progress-bar-container ul {
padding:0;
margin:0;
padding-top:15px;
z-index:9999;
position:absolute;
width:100%;
margin-top:-40px
}

#progress-bar-container li:before {
content:" ";
display:block;
margin:auto;
width:30px;
height:30px;
border-radius:50%;
border:solid 2px #aaa;
transition:all ease .3s
}

#progress-bar-container li.active:before,#progress-bar-container li:hover:before {
border:solid 2px #fff;
background:linear-gradient(to right,#0096FF 0%,#000e2f 100%)
}

#progress-bar-container li {
list-style:none;
float:left;
width:25%;
text-align:center;
color:#000;
text-transform:uppercase;
font-size:11px;
cursor:pointer;
font-weight:700;
transition:all ease .2s;
vertical-align:bottom;
height:60px;
position:relative
}

#progress-bar-container li .step-inner {
position:absolute;
width:100%;
bottom:0;
font-size:14px
}

#progress-bar-container li.active,#progress-bar-container li:hover {
color:navy
}

#progress-bar-container li:after {
content:" ";
display:block;
width:6px;
height:6px;
background:#777;
margin:auto;
border:solid 7px #fff;
border-radius:50%;
margin-top:40px;
box-shadow:0 2px 13px -1px rgba(0,0,0,0.3);
transition:all ease .2s
}

#progress-bar-container li:hover:after {
background:#555
}

#progress-bar-container li.active:after {
background:#000e2f
}

#progress-bar-container #line {
width:80%;
margin:auto;
background:#eee;
height:6px;
position:absolute;
left:10%;
top:57px;
z-index:1;
border-radius:50px;
transition:all ease .9s
}

#progress-bar-container #line-progress {
content:" ";
width:3%;
height:100%;
background:#000e2f;
background:linear-gradient(to right,#0096FF 0%,#000e2f 100%);
position:absolute;
z-index:2;
border-radius:50px;
transition:all ease .9s
}

#progress-content-section {
width:90%;
margin:auto;
background:#f3f3f3;
border-radius:4px
}

#progress-content-section .section-content {
padding:30px 40px;
text-align:center
}

/*
#progress-content-section .section-content p {
font-size:16px;
line-height:1.8em;
color:#777
} */
/* added by O. Echevarria
 * 
 * reason: accessibility
 *  
 * */
#progress-content-section .section-content p {
font-size:16px;
line-height:1.8em;
color:#000
}

#progress-content-section .section-content {
display:none;
animation:FadeInUp 700ms ease 1;
animation-fill-mode:forwards;
transform:translateY(15px);
opacity:0
}

#progress-content-section .section-content.active {
display:block
}

@keyframes FadeInUp {
0% {
transform:translateY(15px);
opacity:0
}

100% {
transform:translateY(0px);
opacity:1
}
}