/*Basic Styles*/

html,body {
height:100%;
}

body {
background:#111111;
color:#222;
font-weight:200;
font: 13px/1.5 Lato, "Century Gothic", "Trebuchet MS", Helvetica, sans-serif;
-webkit-font-smoothing:antialiased;
}

a {
color:#89d460;
text-decoration:none;
transition:all 0.125 ease-in-out 0s;
-webkit-transition:all 0.125s ease-in-out 0s;
-moz-transition:all 0.125s ease-in-out 0s;
-ms-transition:all 0.125s ease-in-out 0s;
-o-transition:all 0.125s ease-in-out 0s;
}

ul, ol {
margin: 1em 0 2em 0;
padding: 0 0 0 20px;
}
a:hover
{
color:#89d460;
}

a {
text-decoration:none;
color:#f77c03;
}

a:hover {
color:#ccc;
}
.nav > .menu > .btMenu {
	display: none;
}

a,a:hover,a:focus,a:active {
border:0;
outline:0;
text-decoration:none;
}

hr { 
height:3px; 
background: #c40004;  
}

.yomer-float-right {
float:right;
}
.yomer-float-left {
float:left;
}

.yomer-center {
display:block;
margin-left:auto;
margin-right:auto;
}
.yomer-hide {
display:none !important;
visibility:hidden !important;
}
.yomer-show {
display:block !important; 
}

.yomer-preloader {
width:100%;
height:100%;
position:fixed;
left:0;
top:0;
bottom:0;
right:0;
z-index:9999;
background:#fff url('../img/preloader.gif') no-repeat center center;
}

/*Typography*/
.yomer-text-center {
text-align:center;
}

.yomer-text-uppercase {
text-transform:uppercase;
}

.yomer-text-right {
text-align:right;
padding : 2em 0 2em 0 ;
}

.yomer-text-left {
text-align:left;
}

.yomer-text-justify {
text-align:justify;
}

h2 {
margin: .25em 0;
padding-bottom: 1em;
font-size: 4.5em;
font-weight: 700;
color: #2b2b2b;
cursor: default;
}

h1 {
margin: 2% 13%;
padding-bottom: 1em;
font-size: 2em;
font-weight: 700;
color: #2b2b2b;
cursor: default;
}

/*navigation..........................*/
body>.nav {
	width: 100%;
	height : 5.5em;
	position:fixed;
	z-index:999;
	background:#fff;
	display: block !important;
	}

body>.nav2 {
	width: 100%;
	height : 2.9em;
	margin: 0;
	position:fixed;
	left:0px;
	top:60px;
	z-index:998;
	background:#c40004;
}
	
body>.nav2 > .menu {
	list-style: none;
	margin: 12px 10px 0 0;
	padding: 0;
	float: right;
}

body>.nav2 > .menu > li{
	display: block !important;
	float: left;
}

body>.nav2 > .menu > li > a{
	padding: 3px 28px;
	color: #fff;
	font-size: 16px;
	font-weight: 300;
	text-decoration: none;
}

body>.nav2 > .menu > li > a:hover{
	background: #fff;
	color:#c40004;
}

body>.nav2 > .menu > .btMenu {
	display: none;
}

.wrapper {
width:100%;
top:11.5%;
height:auto;
position:relative;
box-sizing:border-box;
background:#fff;
}

img {
	max-width:100%; 
	height:auto;
	display:inline;
}

.pc img {
	width:100%; 
	height:auto;
}

.mobile img {
	display:none;
}
	
.logo {
position:absolute;
margin: 1% 8%;
z-index:3;
opacity:1;
min-width: 200px;
height: 50px;
background:url('../img/logo.png') no-repeat;
background-size: contain;
display: block !important;
}

.menu_header {
position:absolute;
top:34px;
right:5%;
display:inline;
z-index:2;
}

.menu_header a {
display:inline-block;
text-decoration:none;
text-transform:uppercase;
margin-left:20px;
outline:none;
font-weight:400;
color:#fff;
float:left;
opacity:1;
}

.at-showmenu .at-showmenu-link {
display: inline-block;
padding-right: 8px;
float: left;
}

.subhead {
position:relative;
top: 40px;
}

.subhead p {
text-shadow: 0 1px 2px rgba(0,0,0,.5);
font-size: 1.5em;
font-weight: 600;
color: #eee;
cursor: default;
letter-spacing : 3px;
}

.buttons {
position:relative;
margin:0 auto;
width:100%;
min-width:200px;
min-height:41px;
}

.buttons form {
display: inline-block;
margin: 0;
padding: 0;
}

.buttons button {
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
transition: all .3s ease;
border-radius: 3px;
margin: 0 5px;
cursor: pointer;
}

.form-submit {
width: 200px;
height: 41px;
line-height: 51px;
outline: none;
background-repeat: no-repeat;
background-position: 0 0;
border: none;
background-size:200px 41px;
}

.buttons button:hover {
-webkit-transform: translate3d(0,-8px,0);
-moz-transform: translate3d(0,-8px,0);
-ms-transform: translate3d(0,-8px,0);
-o-transform: translate3d(0,-8px,0);
transform: translate3d(0,-8px,0);
}

.logos {
width:100%;
padding-top:100px;
padding-bottom:80px;

}

.logos img {
width:100%;
}

.godown{
position: absolute;
left: 0;
right: 0;
bottom: 20px;
background: url('../img/header-downarrow.png') no-repeat center;
background-size: 50px 27px;
height: 64px;
line-height: 64px;
text-indent: -9999em;
overflow: hidden;
opacity: .5;
z-index: 1;
-webkit-transition: opacity .5s linear;
-moz-transition: opacity .5s linear;
transition: opacity .5s linear;
-webkit-transition: bounce 1s ease-in-out;
-moz-transition: bounce 1s ease-in-out;
transition: bounce 1s ease-in-out;
animation-play-state: paused;
}

.animate {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}

@media only screen 
and (min-device-width : 200px) 
and (max-device-width : 700px) 
{

	.pc img {
	display:none;
	}	
	
	.mobile img {
	max-width:100%; 
	height:auto;
	display: inline;
	}
	
    h1 {
		margin: 6% 13%;
		padding-left:2em;
		font-size: 1.4em;
		font-weight: 800;
		color: #2b2b2b;
		cursor: default;
		}
		
	body>.nav {
		width: 100%;
		height : 4.7em;
		position:fixed;
		z-index:999;
		background:#fff;
		display: block !important;
		border-bottom: 2px solid red;
	}
	
	body>.nav2{
		display:none;
	}
	
	.wrapper {
		width:100%;
		top:10.5%;
		height:auto;
		position:relative;
		box-sizing:border-box;
	}
}

@media screen 
and (min-width: 768px) 
and (max-width: 1300px) 
{
	h1 {
	margin: 2% 14%;
	padding-bottom: 1em;
	font-size: 2em;
	font-weight: 700;
	color: #2b2b2b;
	cursor: default;
	}
	
	.wrapper {
		width:100%;
		top:16.5%;
		height:auto;
		position:relative;
		box-sizing:border-box;
	}
}

@media screen 
and (min-width: 50px) 
and (max-width: 320px) 
{
    h1 {
		margin: 3.25% 15%;
		padding-left:2em;
		font-size: 1.5em;
		font-weight: 800;
		color: #2b2b2b;
		cursor: default;
		}
		
	body>.nav2{
		display:none;
	}
	.wrapper {
		width:100%;
		top:18.5%;
		height:auto;
		position:relative;
		box-sizing:border-box;
	}
}

@media screen 
and (min-width: 320px) 
and (max-width: 767px) 

{
    h1 {
		margin: 5.25% 15%;
		padding-left:2em;
		font-size: 1.4em;
		font-weight: 800;
		color: #2b2b2b;
		cursor: default;
		}
	
	body>.nav2{
		display:none;
	}
	.wrapper {
		width:100%;
		top:10.5%;
		height:auto;
		position:relative;
		box-sizing:border-box;
	}
}

/*..................................................CAPABILITIES...................*/
.capabilities {
width:100%;
background-color:#fff;
position:relative;
overflow:hidden;
}

.capabilities >.container {
padding-top:110px;
padding-bottom:90px;
}

.capabilities subtitle {
margin: 0 13%;
font-weight: 200;
font-size: 2em;
line-height: 1.2em;
color: #878787;
margin-bottom:2px;
}

.capabilities h4 {
font-size: 2em;
color:#000;
font-weight:800;
text-align:left;
padding: 30px 20px 10px 20px;
}
.capabilities h3 {
font-size: 1.5em;
color:#000;
padding-bottom:4em;
}
.capabilities h2 {
font-size: 3em;
color:#000;
font-weight:800;
padding-bottom:2em;
}
.capabilities small {
font-size: 1em;
color:#000;
padding: 0 20px 0 20px;
display: block;
}

.icon-widget {
display: block;
width: 120px;
height: 120px;
margin: 0 auto 20px;
background-repeat: no-repeat;
background-position: 0 0;
background-size: 120px;
overflow: hidden;
text-indent: -9999em;
line-height: 200px;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
transition: all .3s ease;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #ffffff;
    margin: auto;
    padding-bottom:8em;
    border: 10px solid #fff;
    width: 60%;
}


/* The Close Button */
.close {
    color: #000;
    float: right;
    font-size: 13px;
    padding-right:20px;
    padding-bottom:10px;
    font-weight: bold;
    background-color: #fff;
    width:100%;
    text-align:right;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
 /* jssor slider bullet navigator skin 05 css */
        /*
        .jssorb05 div           (normal)
        .jssorb05 div:hover     (normal mouseover)
        .jssorb05 .av           (active)
        .jssorb05 .av:hover     (active mouseover)
        .jssorb05 .dn           (mousedown)
        */
        .jssorb05 {
            position: absolute;
        }
        .jssorb05 div, .jssorb05 div:hover, .jssorb05 .av {
            position: inherit;
            /* size of bullet elment */
            width: 16px;
            height: 16px;
            background: url('../img/b05.png') no-repeat;
            overflow: hidden;
            float:right;
            cursor: pointer;
        }
        .jssorb05 div { background-position: -7px -7px; }
        .jssorb05 div:hover, .jssorb05 .av:hover { background-position: -37px -7px; }
        .jssorb05 .av { background-position: -67px -7px; }
        .jssorb05 .dn, .jssorb05 .dn:hover { background-position: -97px -7px; }

        /* jssor slider arrow navigator skin 22 css */
        /*
        .jssora22l                  (normal)
        .jssora22r                  (normal)
        .jssora22l:hover            (normal mouseover)
        .jssora22r:hover            (normal mouseover)
        .jssora22l.jssora22ldn      (mousedown)
        .jssora22r.jssora22rdn      (mousedown)
        */
        .jssora22l, .jssora22r {
            display: block;
            position: absolute;
            /* size of arrow element */
            width: 40px;
            height: 58px;
            cursor: pointer;
            background: url('../img/a22.png') center center no-repeat;
            float:right;
            overflow: hidden;
        }
        .jssora22l { background-position: -10px -31px; }
        .jssora22r { background-position: -70px -31px; }
        .jssora22l:hover { background-position: -130px -31px; }
        .jssora22r:hover { background-position: -190px -31px; }
        .jssora22l.jssora22ldn { background-position: -250px -31px; }
        .jssora22r.jssora22rdn { background-position: -310px -31px; }
        
        
.icon-widget.icon-1 {
background-image: url('../img/icon_1.png');
}

.icon-widget.icon-2 {
background-image: url('../img/icon_2.png');
}

.icon-widget.icon-3 {
background-image: url('../img/icon_3.png');

}
.icon-widget.icon-4 {
background-image: url('../img/icon_4.png');
}

.icon-widget.icon-5 {
background-image: url('../img/icon_5.png');
}

.icon-widget.icon-6 {
background-image: url('../img/icon_6.png');
}

.icon-widget.icon-recommend {
background-image: url('../img/icon-recommended_2x.png');
}
.icon-widget:hover {
-webkit-transform: scale(1.4);
-moz-transform: scale(1.4);
transform: scale(1.4);
}

@media only screen 
and (min-device-width : 200px) 
and (max-device-width : 700px) 
{
	.capabilities >.container {
	padding-top:40px;
	padding-bottom:40px;
	}

	.capabilities subtitle{
	margin: 0 1%;
	font-weight: 200;
	font-size: 1.3em;
	color: #878787;
	}
	
	.capabilities h2 {
	font-size: 2em;
	color:#000;
	font-weight:800;
	}
	
	.capabilities h3 {
	font-size: 1.3em;
	padding-bottom:20px;
	}
	
	.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 70px; /* Location of the box */
    padding-bottom:1em;
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
	}

	.modal-content {
    background-color: #ffffff;
    margin: 0% auto;
    padding-bottom:16em;
    width: 100%;
	}
	
	.close {
    color: #ffffff;
    float: right;
    font-size: 1em;
    padding: 0.75em 0.75em 0.75em 0.75em;
    background-color: #000000;
    width:100%;
    font-weight: bold;
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;  
	}	
	
}



/*..................................................OUR MISSION...................*/

.ourmission {
width:100%;
position:relative;
overflow:hidden;
background:url('../img/bg-testmonial-01.jpg') no-repeat;
background-attachment:fixed;
background-size:cover;
background-color:#fff;
}

.ourmission >.container {
padding-top:110px;
padding-bottom:110px;
}

.ourmission h3 {
font-size: 3em;
color:#fff;
font-weight:800;
text-align:center;
}

.ourmission h4 {
color:#fff;
line-height:1.5em;
font-weight:800;
font-size : 2em;
margin-bottom:1em;
font-style: italic;
}

.ourmission hr { 
height:1px; 
background: #ffffff; 
}

.ourmission small {
font-size:1.3em;
font-weight:800;
color:#ffffff;
text-height:1.5em;
}

@media only screen 
and (min-device-width : 200px) 
and (max-device-width : 700px) 
{
	.ourmission {
	width:100%;
	position:relative;
	overflow:hidden;
	background:url('../img/bg-testmonial-01.jpg') no-repeat;
	background-attachment:relative;
	background-size:cover;
	background-color:#fff;
	}

	.ourmission >.container {
	padding-top:20px;
	padding-bottom:50px;
	}
	
	.ourmission h3 {
	font-size: 2em;
	color:#fff;
	font-weight:800;
	text-align:center;
	}
	
	.ourmission h4 {
	color:#fff;
	font-weight:800;
	font-size : 1.3em;
	margin-bottom:1em;
	font-style: italic;
	}
	
	.ourmission small {
	font-size:0.9em;
	font-weight:400;
	color:#ffffff;
	text-height:1.5em;
	}

}

/*..................................................ABOUT...................*/
.about
{
width:100%;
position:relative;
overflow:hidden;
background-color:#fff;
}

.about subtitle{
font-weight: 200;
font-size: 2em;
line-height: 1.2em;
color: #878787;
margin-bottom:2em;
}

.about >.container
{
padding-top:110px;
padding-bottom:50px;
}

.about h2
{
margin: .25em 0;
padding-bottom: 0em;
font-size: 3.5em;
font-weight: 700;
color: #2b2b2b;
cursor: default;
}
.about h4
{
margin: .25em 0;
padding-top: 1em;
font-size: 2.5em;
font-weight: 700;
color: #2b2b2b;
cursor: default;
}

.about h5
{
font-weight: 700;
color: #2b2b2b;
cursor: default;
}

.about h3
{
color:#fff;
}

.nav-tabs {
border-bottom-color: #ccc;
margin-top: 50px;
font-size: 1.3em;
text-align: center;
}

.nav-tabs>li>a {
position: relative;
border-color: #f2f2f2 #f2f2f2 #e0e0e0;
border: none;
text-align: center;
text-transform: uppercase;
padding-bottom: 30px;
letter-spacing: 1px;
font-weight: 600;
font-size: 1.3em;
color: #1a97fa;
}

.about img {
	max-width:100%; 
	height:auto;
	    border: 1px solid #ddd;
    border-radius: 4px;
}

.tab-content {
min-height: 420px;
padding: 50px 50px;
}

.about ol, ul {
	list-style: none;
}

.about blockquote, q {
	quotes: none;
}

.about blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
.about table {
	border-collapse: collapse;
	border-spacing: 0;
}

.about li {
    margin-bottom: 10px;
}

.athumb img {
	height: 40px;
	width:60px;
	border: 1px solid #555;
	padding: 1px;
	margin: 0 10px 10px 0;
}

.athumb img:hover {
	border: 1px solid #00ccff;
	cursor:pointer;
}

.preview img {
	border: 1px solid #555;
	margin-bottom :10px;
	width: 300px;
	height:200px;
	
}

@media only screen 
and (min-device-width : 200px) 
and (max-device-width : 700px) 
{

	.tab-content {
		min-height: 400px;
		padding: 5px 5px;
	}

	.about > space {
		padding-top:90px;
		padding-bottom:90px;
	}
	.about >.container {
		padding-top:30px;
		padding-bottom:90px;
	}
	
	.nav-tabs {
		margin-top: 5px;
		border-bottom-color: #ccc;
		font-size: 1em;
		text-align: center;
	}
	
	.nav-tabs>li>a {
	position: relative;
	border-color: #f2f2f2 #f2f2f2 #e0e0e0;
	border: none;
	text-align: center;
	text-transform: uppercase;
	font-weight: 400;
	font-size: 1em;
	color: #1a97fa;
	}
	
	.about img {
	max-width:100%; 
	height:auto;
	}
	
	.about h2
	{
	margin: .25em 0;
	padding-bottom: 0em;
	font-size: 2em;
	font-weight: 700;
	color: #2b2b2b;
	cursor: default;
	}
	
	
	.about h4
	{
	margin: 0 0;
	font-size: 1.6em;
	padding-bottom:1em;
	font-weight: 700;
	color: #2b2b2b;
	cursor: default;
	}
	
	.about subtitle{
	font-weight: 200;
	font-size: 1.3em;
	line-height: 1.2em;
	color: #878787;
	margin-bottom:2em;
	}
	
}

/*..................................................WHYCHOSE...................*/
.whychose {
width:100%;
position:relative;
overflow:hidden;
background:url('../img/bg-testmonial-03.jpg') no-repeat;
background-attachment:fixed;
background-size:cover;
background-color:#fff;
}

.whychose >.container {
padding-top:90px;
padding-bottom:200px;
}

.whychose h3 {
font-size: 3em;
color:#fff;
font-weight:800;
text-align:center;
padding: 0 0 0.5em 0;
}

.whychose h4 {
color:#fff;
line-height:1.5em;
padding: 0 0 4em 0;
}
.whychose h5 {
color:#fff;
}

.whychose big {
font-size:1.5em;
color:#ffffff;
text-height:1em;
font-weight:800;
}

.whychose hr { 
height:1px; 
background: #ffffff; 
}

.icon-widget.why-1 {
background-image: url('../img/why_1.png');
}

@media only screen 
and (min-device-width : 200px) 
and (max-device-width : 700px) 
{

	.whychose >.container {
	padding-top:30px;
	padding-bottom:90px;
	}
	
	.whychose h3 {
	font-size: 2em;
	color:#fff;
	font-weight:800;
	text-align:center;
	padding: 0 0 0.5em 0;
	}
	
	.whychose h4 {
	color:#fff;
	font-size: 1.3em;
	line-height:1.3em;
	padding: 0 0 2em 0;
	}
	
	.whychose h5 {
	font-size:1.3em;
	color:#fff;
	padding-bottom:2em;
	}

	.whychose big {
	font-size:1.9em;
	color:#ffffff;
	text-height:1em;
	font-weight:800;
	}
	
	.icon-widget.why-1 {
	background-image: url('../img/why_1.png');
	background-size: 90%;
    background-repeat: no-repeat;
    background-position: center; 
	}

}

/*----------------------------------------------contact-------------------------*/

.contactform
{
width:100%;
position:relative;
overflow:hidden;
background:#c40004;
border-top:1px dashed #eee;
}

.contactform >.container
{
padding-top:30px;
padding-bottom:100px;
}

.contactform h3
{
color:#ffffff;
font-weight:800;
}

.contactform h5
{
color:#ffffff;
font-weight:300;
line-height: 1.5em;
}

.contactform a
{
text-transform:uppercase;
font-weight:600;
color:#fff;
opacity:1;
}

.contactform a:hover
{
text-decoration: underline;
font-weight:800;
color:#fff;
}

.contactform hr
{
text-align:left;
}

.contactform small
{
font-size: 1em;
color:#ffffff;
padding-left:20px;
}

/*..................................................FOOTER...................*/
.testimonial
{
width:100%;
position:relative;
overflow:hidden;
background:#fff;
}
.testimonial >.container
{
padding-top:50px;
padding-bottom:50px;
}
.testimonial h3
{
color:#fff;
}




@media (max-width: 900px)
{
	.logo
	{
	display:none;
	}
	
	body>.nav > .menu{
		width: 100%;
		margin: 0;
	}
	body>.nav > .menu > li{
		width: 100%;
		display: none;
		text-align: center;
	}
	body>.nav > .menu > li > a{
		padding: 8px 20px;
		width: 100%;
	}
	body>.nav > .menu > .btMenu{
		display: inline-block;
		padding: 12px 16px;
	}
}
	
     
/*.........................timeline css..................*/
/* -------------------------------- 

Main Components 

-------------------------------- */
.cd-horizontal-timeline {
  opacity: 0;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.cd-horizontal-timeline::before {
  /* never visible - this is used in jQuery to check the current MQ */
  content: 'mobile';
  display: none;
}

.cd-horizontal-timeline.loaded {
  /* show the timeline after events position has been set (using JavaScript) */
  opacity: 1;
}

.cd-horizontal-timeline .timeline {
  position: relative;
  height: 100px;
  width: 90%;
  max-width: 100%;
  margin: 0 auto;
}

.cd-horizontal-timeline .events-wrapper {
  position: relative;
  height: 100%;
  margin: 0 40px;
  overflow: hidden;
}

.cd-horizontal-timeline .events-wrapper::after, .cd-horizontal-timeline .events-wrapper::before {
  /* these are used to create a shadow effect at the sides of the timeline */
  content: '';
  position: absolute;
  z-index: 2;
  top: 0;
  height: 100%;
  width: 20px;
}

.cd-horizontal-timeline .events-wrapper::before {
  left: 0;
  background-image: -webkit-linear-gradient( left , #fff, rgba(255, 255, 255, 0));
  background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
}

.cd-horizontal-timeline .events-wrapper::after {
  right: 0;
  background-image: -webkit-linear-gradient( right , #fff, rgba(255, 255, 255, 0));
  background-image: linear-gradient(to left, #fff, rgba(255, 255, 255, 0));
}

.cd-horizontal-timeline .events {
  /* this is the grey line/timeline */
  position: absolute;
  z-index: 1;
  left: 0;
  top: 49px;
  height: 2px;
  /* width will be set using JavaScript */
  background: #dfdfdf;
  -webkit-transition: -webkit-transform 0.4s;
  -moz-transition: -moz-transform 0.4s;
  transition: transform 0.4s;
}

.cd-horizontal-timeline .filling-line {
  /* this is used to create the green line filling the timeline */
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: #dc0f0f;
  -webkit-transform: scaleX(0);
  -moz-transform: scaleX(0);
  -ms-transform: scaleX(0);
  -o-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -ms-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
}
.cd-horizontal-timeline .events a {
  position: absolute;
  bottom: 0;
  z-index: 2;
  text-align: center;
  font-size: 1.3rem;
  padding-bottom: 15px;
  color: #383838;
  /* fix bug on Safari - text flickering while timeline translates */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}
.cd-horizontal-timeline .events a::after {
  /* this is used to create the event spot */
  content: '';
  position: absolute;
  left: 50%;
  right: auto;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  bottom: -5px;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  border: 2px solid #dc0f0f;
  background-color: #f8f8f8;
  -webkit-transition: background-color 0.3s, border-color 0.3s;
  -moz-transition: background-color 0.3s, border-color 0.3s;
  transition: background-color 0.3s, border-color 0.3s;
}
.no-touch .cd-horizontal-timeline .events a:hover::after {
  background-color: #dc0f0f;
  border-color: #dc0f0f;
}
.cd-horizontal-timeline .events a.selected {
  pointer-events: none;
}
.cd-horizontal-timeline .events a.selected::after {
  background-color: #dc0f0f;
  border-color: #dc0f0f;
}
.cd-horizontal-timeline .events a.older-event::after {
  border-color: #dc0f0f;
}
@media only screen and (min-width: 1100px) {
  .cd-horizontal-timeline {
    margin: 6em auto;
  }
  .cd-horizontal-timeline::before {
    /* never visible - this is used in jQuery to check the current MQ */
    content: 'desktop';
  }
}

.cd-timeline-navigation a {
  /* these are the left/right arrows to navigate the timeline */
  position: absolute;
  z-index: 1;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  height: 34px;
  width: 34px;
  border-radius: 50%;
  border: 2px solid #dfdfdf;
  /* replace text with an icon */
  overflow: hidden;
  color: transparent;
  text-indent: 100%;
  white-space: nowrap;
  -webkit-transition: border-color 0.3s;
  -moz-transition: border-color 0.3s;
  transition: border-color 0.3s;
}

.cd-timeline-navigation a::after {
  /* arrow icon */
  content: '';
  position: absolute;
  height: 16px;
  width: 16px;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  background: url(../img/cd-arrow.svg) no-repeat 0 0;
}

.cd-timeline-navigation a.prev {
  left: 0;
  -webkit-transform: translateY(-50%) rotate(180deg);
  -moz-transform: translateY(-50%) rotate(180deg);
  -ms-transform: translateY(-50%) rotate(180deg);
  -o-transform: translateY(-50%) rotate(180deg);
  transform: translateY(-50%) rotate(180deg);
}

.cd-timeline-navigation a.next {
  right: 0;
}

.no-touch .cd-timeline-navigation a:hover {
  border-color: #dc0f0f;
}

.cd-timeline-navigation a.inactive {
  cursor: not-allowed;
}

.cd-timeline-navigation a.inactive::after {
  background-position: 0 -16px;
}

.no-touch .cd-timeline-navigation a.inactive:hover {
  border-color: #dfdfdf;
}

.cd-horizontal-timeline .events-content {
  position: relative;
  width: 100%;
  margin: 1em 0;
  overflow: hidden;
  -webkit-transition: height 0.4s;
  -moz-transition: height 0.4s;
  transition: height 0.4s;
}

.cd-horizontal-timeline .events-content li {
  position: absolute;
  z-index: 1;
  width: 100%;
  left: 0;
  top: 0;
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
  padding: 0 5%;
  opacity: 0;
  -webkit-animation-duration: 0.4s;
  -moz-animation-duration: 0.4s;
  animation-duration: 0.4s;
  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

.cd-horizontal-timeline .events-content li.selected {
  /* visible event content */
  position: relative;
  z-index: 2;
  opacity: 1;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}

.cd-horizontal-timeline .events-content li.enter-right, .cd-horizontal-timeline .events-content li.leave-right {
  -webkit-animation-name: cd-enter-right;
  -moz-animation-name: cd-enter-right;
  animation-name: cd-enter-right;
}

.cd-horizontal-timeline .events-content li.enter-left, .cd-horizontal-timeline .events-content li.leave-left {
  -webkit-animation-name: cd-enter-left;
  -moz-animation-name: cd-enter-left;
  animation-name: cd-enter-left;
}

.cd-horizontal-timeline .events-content li.leave-right, .cd-horizontal-timeline .events-content li.leave-left {
  -webkit-animation-direction: reverse;
  -moz-animation-direction: reverse;
  animation-direction: reverse;
}

.cd-horizontal-timeline .events-content li > * {
  max-width: 800px;
  margin: 0 auto;
}

.cd-horizontal-timeline .events-content h2 {
  font-weight: bold;
  font-size: 2.6rem;
  font-family: "Playfair Display", serif;
  font-weight: 700;
  line-height: 1.2;
}

.cd-horizontal-timeline .events-content em {
  display: block;
  font-style: italic;
  margin: 10px auto;
}

.cd-horizontal-timeline .events-content em::before {
  content: '- ';
}

.cd-horizontal-timeline .events-content p {
  font-size: 1.4rem;
  color: #959595;
}

.cd-horizontal-timeline .events-content em, .cd-horizontal-timeline .events-content p {
  line-height: 1.6;
}

@media only screen and (min-width: 768px) {
  .cd-horizontal-timeline .events-content h2 {
    font-size: 7rem;
  }
  .cd-horizontal-timeline .events-content em {
    font-size: 2rem;
  }
  .cd-horizontal-timeline .events-content p {
    font-size: 1.8rem;
  }
}

@-webkit-keyframes cd-enter-right {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
  }
}
@-moz-keyframes cd-enter-right {
  0% {
    opacity: 0;
    -moz-transform: translateX(100%);
  }
  100% {
    opacity: 1;
    -moz-transform: translateX(0%);
  }
}
@keyframes cd-enter-right {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
    transform: translateX(0%);
  }
}
@-webkit-keyframes cd-enter-left {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
  }
}
@-moz-keyframes cd-enter-left {
  0% {
    opacity: 0;
    -moz-transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    -moz-transform: translateX(0%);
  }
}
@keyframes cd-enter-left {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
    transform: translateX(0%);
  }
}