@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800');
@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700');
@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,600,700');
body {
font-family: 'Roboto', sans-serif;
}
#cd-timeline {
position: relative;
padding: 2em 0;
margin-bottom: 2em;
}
#cd-timeline::before {
/* this is the vertical line */
content: '';
position: absolute;
top: 0;
height: 100%;
width:2px;
background:rgba(0, 0, 0, 0.1);
}
@media only screen and (min-width: 1170px) {
#cd-timeline {
margin-bottom:0;
}
#cd-timeline::before {
left: 50%;
margin-left: -1em;
}
}

.cd-timeline-block {
position: relative;
margin: 2em 0;
}
.cd-timeline-block::after {
clear: both;
content: "";
display: table;
}
.cd-timeline-block:first-child {
margin-top: 0;
}
.cd-timeline-block:last-child {
margin-bottom: 0;
}
@media only screen and (min-width: 1170px) {
.cd-timeline-block {
margin: 4em 0;
}
.cd-timeline-block:first-child {
margin-top: 0;
}
.cd-timeline-block:last-child {
margin-bottom: 0;
}
}

.cd-timeline-img {
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
border:15px solid rgba(190, 190, 190, 0.8);
}
.cd-timeline-img:hover {
border:15px solid#F68921;
}
.cd-timeline-img img {
display: block;
width: 24px;
height: 24px;
position: relative;
left: 50%;
top: 50%;
margin-left: -12px;
margin-top: -12px;
}
.cd-timeline-img.cd-picture {
background: #FFF;
}
.cd-timeline-img.cd-movie {
background: #FFF;
}
.cd-timeline-img.cd-location {
background: #FFF;
}
.cd-timeline-img1 {
position: absolute;
top: 0;
left: 0;
width:10px;
height:10px;
border-radius: 50%;
border:15px solid rgba(190, 190, 190, 0.8);
}
.cd-timeline-img1:hover {
border:15px solid#F68921;
}
.cd-timeline-img1 img {
display: block;
width: 24px;
height: 24px;
position: relative;
left: 50%;
top: 50%;
margin-left: -12px;
margin-top: -12px;
}
.cd-timeline-img1.cd-picture {
background: #FFF;
}
.cd-timeline-img1.cd-movie {
background: #FFF;
}
.cd-timeline-img1.cd-location {
background: #FFF;
}
@media only screen and (min-width: 1170px) {
.cd-timeline-img {
width: 10px;
height: 10px;
left:405px;
margin-left:0;
/* Force Hardware Acceleration in WebKit */
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;
}
.cd-timeline-img1 {
width: 10px;
height: 10px;
left:-4.3vw;
margin-left:0px;
/* Force Hardware Acceleration in WebKit */
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;
}
.cssanimations .cd-timeline-img.is-hidden {
visibility: hidden;
}
.cssanimations .cd-timeline-img.bounce-in {
visibility: visible;
-webkit-animation: cd-bounce-1 0.6s;
-moz-animation: cd-bounce-1 0.6s;
animation: cd-bounce-1 0.6s;
}
}

@-webkit-keyframes cd-bounce-1 {
0% {
opacity: 0;
-webkit-transform: scale(0.5);
}
60% {
opacity: 1;
-webkit-transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
}
}
@-moz-keyframes cd-bounce-1 {
0% {
opacity: 0;
-moz-transform: scale(0.5);
}
60% {
opacity: 1;
-moz-transform: scale(1.2);
}
100% {
-moz-transform: scale(1);
}
}
@keyframes cd-bounce-1 {
0% {
opacity: 0;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
}
60% {
opacity: 1;
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
.cd-timeline-content {
position: relative;
margin-left: 60px;
background: #ffffff;
}
.cd-timeline-content::after {
clear: both;
content: "";
display: table;
}
.cd-timeline-content h2 {
color: #303e49;
}
.cd-timeline-content p, .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
font-size: 13px;
font-size: 0.8125rem;
}
.cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
display: inline-block;
}
.cd-timeline-content p {
margin: 1em 0;
line-height: 1.6;
}
.cd-timeline-content .cd-read-more {
float: right;
padding: .8em 1em;
background: #acb7c0;
color: #ffffff;
border-radius: 0.25em;
}
.no-touch .cd-timeline-content .cd-read-more:hover {
background-color: #F68921;
}
.cd-timeline-content .cd-date {
float: left;
padding: .8em 0;
opacity: .7;
}
.cd-timeline-content::before {
content: '';
position: absolute;
top: 16px;
right: 100%;
height: 0;
width: 0;
border: 7px solid transparent;
border-right: 7px solid #ffffff;
}
@media all and (max-width : 768px) {
.cd-timeline-content {
position: relative;
margin-left:0;
background:none;
}
.cd-timeline-content::before {
display:none;
}
.right-margin {
padding-right: 0;
padding-left: 0;
}
.left-margin {
padding-right: 0;
padding-left: 0;
margin-top:0;
}
.cd-timeline-content figure {
display: block;
width: 100%;
position: relative;
overflow: hidden;
vertical-align: middle;
border-radius: 10px 10px 0 0;
background-color:#FFF;
}
.cd-timeline-content figure img {
width:100%;
}
.cd-timeline-content .boxs {
display: block;
width: 100%;
padding: 20px 20px;
margin-bottom:30px;
background-color:#f5f4f4;
}
.cd-timeline-img {
display:none;
}
#cd-timeline::before {
display:none;
}
.cd-timeline-img {
display:none;
}
.cd-timeline-img1 {
display:none;
}
.cd-timeline-content .boxs h2 {
font-family: 'Roboto', sans-serif;
font-weight: 400;
color: #000;
font-size: 18px;
margin: 0 0 0;
padding-bottom: 5px;
}
.cd-timeline-content .boxs li {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    text-align: left;
    line-height: 1.5em;
    font-weight: 400;
    padding-top: 5px;
    margin: 0;
    color: #000;
    padding-bottom: 0;
}
.cd-timeline-content .boxs h4 {
font-size:16px;
font-weight: 600;
color: #f33c3c;
margin: 0 0 10px;
}
.cd-timeline-content .boxs p {
margin: 0;
font-size:14px;
color: #797979;
line-height: 1.5em;
padding-bottom: 0;
}
#cd-timeline {
position: relative;
padding: 0 0;
margin-bottom: 0;
}
}
@media only screen and (min-width : 991px) and (max-width : 1920px) {
.cd-timeline-img {
    position: absolute;
    top: 0;
    left: 111%;
    border-radius: 50%;
    border: 15px solid rgba(190, 190, 190, 0.8);
}
.cd-timeline-img1 {
    position: absolute;
    top: 0;
    left: -12%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 15px solid rgba(190, 190, 190, 0.8);
}
.right-margin {
padding-right: 4.7em;
}
.left-margin {
padding-right:3vw;
padding-left:2vw;
margin-top:10vw;
}
.cd-timeline-content {
margin-left:1vw;
display: block;
position: relative;
overflow: hidden;
vertical-align: middle;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
border-radius: 0;
margin-bottom:0;
box-shadow: 0 2px 4px #ddd;
border:1px solid#f4f4f4;
}
.cd-timeline-content figure {
display: block;
width: 100%;
position: absolute;
overflow: hidden;
vertical-align: middle;
border-radius: 1vw 1vw 0 0;
border-bottom:0;
top:0;
}
.cd-timeline-content figure img {
width: 100%;
}
.cd-timeline-content .boxs {
background: #f5f4f4;
display: block;
width: 100%;
padding:1.5em;
}
.cd-timeline-content figure h5 {
font-family: 'Roboto', sans-serif;
font-weight:600;
color: #FFF;
font-size:1em;
text-transform:uppercase;
background-color:#F68921;
padding:5px;
margin-bottom:0;
margin-top:2vw!important;
width:20%;
border-radius:0 20px 20px 0!important;
text-align:center;
margin-block-start:0;
}
.cd-timeline-content .boxs h2 {
font-family: 'Roboto', sans-serif;
font-weight:400;
color: #000;
font-size:18px;
margin: 0 0 0;
padding-bottom: 5px;
}
.cd-timeline-content .boxs h2 span {
font-family: 'Libre Baskerville', serif;
font-weight: 400;
font-style: italic;
color: #000;
text-transform: none;
}
.cd-timeline-content .boxs h4 {
font-family: 'Roboto', sans-serif;
font-size: 1.5vw;
line-height: 1.3em;
text-align:left;
font-weight:500;
color: #000;
margin: 0 0 .8vw;
}
.cd-timeline-content .boxs p {
font-family: 'Roboto', sans-serif;
font-size: 1em;
text-align:left;
line-height: 1.5em;
font-weight: 300;
margin: 0;
color: #000;
padding-bottom:0;
}
.cd-timeline-content .boxs li {
display:block;
font-family: 'Roboto', sans-serif;
font-size:14px;
text-align:left;
line-height: 1.5em;
font-weight:400;
padding-top:5px;
margin: 0;
color: #000;
padding-bottom:0;
}
.cd-timeline-content::before {
top: 24px;
left: 100%;
border-color: transparent;
border-left-color: #ffffff;
}
.cd-timeline-content .cd-read-more {
float: left;
}
.cd-timeline-content .cd-date {
position: absolute;
width: 100%;
left: 122%;
top: 6px;
font-size: 16px;
font-size: 1rem;
}
.cd-timeline-block:nth-child(even) .cd-timeline-content {
float: right;
}
.cd-timeline-block:nth-child(even) .cd-timeline-content::before {
top: 24px;
left: auto;
right: 100%;
border-color: transparent;
border-right-color: #ffffff;
}
.cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more {
float: right;
}
.cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
left: auto;
right: 122%;
text-align: right;
}
.cssanimations .cd-timeline-content.is-hidden {
visibility: hidden;
}
.cssanimations .cd-timeline-content.bounce-in {
visibility: visible;
-webkit-animation: cd-bounce-2 0.6s;
-moz-animation: cd-bounce-2 0.6s;
animation: cd-bounce-2 0.6s;
}
}
@media only screen and (min-width : 789px) and (max-width : 990px) {
.cd-timeline-img {
    position: absolute;
    top: 0;
    left: 128%;
    border-radius: 50%;
    border: 15px solid rgba(190, 190, 190, 0.8);
}
.cd-timeline-img1 {
    position: absolute;
    top: 0;
    left: -12%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 15px solid rgba(190, 190, 190, 0.8);
}
.right-margin {
padding-right: 4.7em;
}
.left-margin {
padding-right:3vw;
padding-left:2vw;
margin-top:10vw;
}
.cd-timeline-content {
margin-left:1vw;
display: block;
position: relative;
overflow: hidden;
vertical-align: middle;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
border-radius: 0;
margin-bottom:0;
box-shadow: 0 2px 4px #ddd;
border:1px solid#f4f4f4;
}
.cd-timeline-content figure {
display: block;
width: 100%;
position: absolute;
overflow: hidden;
vertical-align: middle;
border-radius: 1vw 1vw 0 0;
border-bottom:0;
top:0;
}
.cd-timeline-content figure img {
width: 100%;
}
.cd-timeline-content .boxs {
background: #f5f4f4;
display: block;
width: 100%;
padding:1.5em;
}
.cd-timeline-content figure h5 {
font-family: 'Roboto', sans-serif;
font-weight:600;
color: #FFF;
font-size:1em;
text-transform:uppercase;
background-color:#F68921;
padding:5px;
margin-bottom:0;
margin-top:2vw!important;
width:20%;
border-radius:0 20px 20px 0!important;
text-align:center;
margin-block-start:0;
}
.cd-timeline-content .boxs h2 {
font-family: 'Roboto', sans-serif;
font-weight:400;
color: #000;
font-size:18px;
margin: 0 0 0;
padding-bottom: 5px;
}
.cd-timeline-content .boxs h2 span {
font-family: 'Libre Baskerville', serif;
font-weight: 400;
font-style: italic;
color: #000;
text-transform: none;
}
.cd-timeline-content .boxs h4 {
font-family: 'Roboto', sans-serif;
font-size: 1.5vw;
line-height: 1.3em;
text-align:left;
font-weight:500;
color: #000;
margin: 0 0 .8vw;
}
.cd-timeline-content .boxs p {
font-family: 'Roboto', sans-serif;
font-size: 1em;
text-align:left;
line-height: 1.5em;
font-weight: 300;
margin: 0;
color: #000;
padding-bottom:0;
}
.cd-timeline-content .boxs li {
display:block;
font-family: 'Roboto', sans-serif;
font-size:14px;
text-align:left;
line-height: 1.5em;
font-weight:400;
padding-top:5px;
margin: 0;
color: #000;
padding-bottom:0;
}
.cd-timeline-content::before {
top: 24px;
left: 100%;
border-color: transparent;
border-left-color: #ffffff;
}
.cd-timeline-content .cd-read-more {
float: left;
}
.cd-timeline-content .cd-date {
position: absolute;
width: 100%;
left: 122%;
top: 6px;
font-size: 16px;
font-size: 1rem;
}
.cd-timeline-block:nth-child(even) .cd-timeline-content {
float: right;
}
.cd-timeline-block:nth-child(even) .cd-timeline-content::before {
top: 24px;
left: auto;
right: 100%;
border-color: transparent;
border-right-color: #ffffff;
}
.cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more {
float: right;
}
.cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
left: auto;
right: 122%;
text-align: right;
}
.cssanimations .cd-timeline-content.is-hidden {
visibility: hidden;
}
.cssanimations .cd-timeline-content.bounce-in {
visibility: visible;
-webkit-animation: cd-bounce-2 0.6s;
-moz-animation: cd-bounce-2 0.6s;
animation: cd-bounce-2 0.6s;
}
}

@media only screen and (min-width: 1170px) {
/* inverse bounce effect on even content blocks */
.cssanimations .cd-timeline-block:nth-child(even) .cd-timeline-content.bounce-in {
-webkit-animation: cd-bounce-2-inverse 0.6s;
-moz-animation: cd-bounce-2-inverse 0.6s;
animation: cd-bounce-2-inverse 0.6s;
}
}
@-webkit-keyframes cd-bounce-2 {
0% {
opacity: 0;
-webkit-transform: translateX(-100px);
}
60% {
opacity: 1;
-webkit-transform: translateX(20px);
}
100% {
-webkit-transform: translateX(0);
}
}
@-moz-keyframes cd-bounce-2 {
0% {
opacity: 0;
-moz-transform: translateX(-100px);
}
60% {
opacity: 1;
-moz-transform: translateX(20px);
}
100% {
-moz-transform: translateX(0);
}
}
@keyframes cd-bounce-2 {
0% {
opacity: 0;
-webkit-transform: translateX(-100px);
-moz-transform: translateX(-100px);
-ms-transform: translateX(-100px);
-o-transform: translateX(-100px);
transform: translateX(-100px);
}
60% {
opacity: 1;
-webkit-transform: translateX(20px);
-moz-transform: translateX(20px);
-ms-transform: translateX(20px);
-o-transform: translateX(20px);
transform: translateX(20px);
}
100% {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
}
@-webkit-keyframes cd-bounce-2-inverse {
0% {
opacity: 0;
-webkit-transform: translateX(100px);
}
60% {
opacity: 1;
-webkit-transform: translateX(-20px);
}
100% {
-webkit-transform: translateX(0);
}
}
@-moz-keyframes cd-bounce-2-inverse {
0% {
opacity: 0;
-moz-transform: translateX(100px);
}
60% {
opacity: 1;
-moz-transform: translateX(-20px);
}
100% {
-moz-transform: translateX(0);
}
}
@keyframes cd-bounce-2-inverse {
0% {
opacity: 0;
-webkit-transform: translateX(100px);
-moz-transform: translateX(100px);
-ms-transform: translateX(100px);
-o-transform: translateX(100px);
transform: translateX(100px);
}
60% {
opacity: 1;
-webkit-transform: translateX(-20px);
-moz-transform: translateX(-20px);
-ms-transform: translateX(-20px);
-o-transform: translateX(-20px);
transform: translateX(-20px);
}
100% {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
}