h1,
h2,
h3,
h4,
h5,
h6{font-family:'Univers55';}
main{display: block;padding: 84px 0 0 0;position: relative;z-index: 8;}
#header{ position:fixed; width: 100%;left: 0;top: 0;background: #ff6600;padding:10px 0 0 0;z-index: 9;}
.logo img{float: left;width: auto;max-width: 100%; padding-bottom: 15px; height: 7rem;}
#header .navbar{margin: 0;border: none;min-height:30px;background:none;}
#header .navbar-nav{float: right;margin: 5px 0 0 0;}
#header .navbar-nav > li > a{padding: 10px 15px;}
#header .navbar-default .navbar-nav > li > a{color: #fff;font-family:'Univers55';font-size: 14px;}
#header .navbar-collapse{padding: 0; margin-left: -10px;}
#header .navbar-default .navbar-nav li a.login,
#header .navbar-default .navbar-nav li a.login:hover{background: #f26522;}
.banner-wrap{padding:70px 0;}
.banner-wrap p,
.banner-wrap h1{color: #333333 ;}
.banner-wrap h1{font-size: 36px;line-height: 42px;margin: 0 0 20px; color: #ff6600;}
.timeline {background: #E0E0E0;padding:70px 0;}
.timeline h2{font-size:50px;line-height:55px;margin: 0 0 20px;text-transform: capitalize;color: #ff6600 ;}
.timeline-wrap{position: relative;margin:250px 0 0 0;}
.timeline-wrap::after {content: '';position: absolute;width: 6px;background-color:#ff6600;top: 0;bottom: 0;left: 50%;margin-left: -3px;height:78%;}
.timeline-column {padding: 10px 140px 10px 0;position: relative;background-color: inherit;width:50%;margin: -170px 0 0 0;}
.timeline-column .timeline-number{position: absolute;width:70px;height:70px;right: -35px;background:#ff6600;border:2px solid #fff;top:0;border-radius: 50%;z-index: 1;text-align: center;font-family:'SimpleSansMedium';font-size: 27px;line-height:70px;color: #fff;}
.timeline-column .timeline-number::before{content: '';position: absolute;right:190px;top:50%;height:14px;width: 14px;margin: -7px 0 0 0;background: #f26522;border-radius: 50%;}
.timeline-column .timeline-number::after{content: '';position: absolute;right:70px;top:50%;height: 2px;width: 120px;border: 2px dotted #00a5d2;margin: -1px 0 0 0;}
.content h4{font-family:'Univers55';color: #333333 ;font-size: 24px;line-height: 27px;padding: 0 28% 0 0;margin: 0 0 10px;}
.timeline-img{display: block;margin: 0 0 10px 0;padding: 0; background: #8a8c8e;border-radius: 10px; ; }
.timeline-img img{ width: 100%;max-width: 100%; padding: 5rem 10rem; height: 285px; }
.timeline-img .alt{ width: 100%;max-width: 100%; height: 285px; }


.timeline-column.right-colum{padding: 10px 0 10px 140px;left: 50%;}
.timeline-column.right-colum .timeline-number{right: auto;left: -35px;}
.timeline-column.right-colum .timeline-number::after{right: auto;left: 70px;}
.timeline-column.right-colum .timeline-number::before{right: auto;left: 190px;}
.timeline-column.right-colum .content h4{text-align: left; padding: 0 0 0 28%;}
.three-column-container{padding: 50px 0;background: #fff;}
.three-column-container h3,
.api-container h3{font-size:50px;line-height:55px;margin: 0 0 20px;color: #ff6600;}
.column-box{margin:70px 0 0 0;min-height: 320px;}
.column-img{display: block;margin: 0;padding: 0;text-align: left;}
.column-img img{width:auto;max-width:150px;display: inline-block;vertical-align: top;max-height:100px;}
.column-box h4{font-family:'Univers55';font-size:24px;line-height:32px;margin:15px 0;color: #333333;}
.apilist-circle{background: #00b6f1;width:250px;height:250px;display: inline-block;border-radius: 50%;position: relative;padding: 15px;}
.apilist-circle::after{content: '';background: #fff;width:220px;height:220px;display: inline-block;border-radius: 50%;position: relative;border: 2px dotted #f26522;position: relative;z-index: 2;}
.apilist-circle span{position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);color: #333333;font-family:'Univers55';font-size:22px;line-height:32px;z-index:3;width: 100%;display: block;padding: 0 40px;}
ul.apilist{margin: 0;padding: 0;list-style: none;text-align: center;}
ul.apilist li{margin: 0 25px;padding: 0;display: inline-block;}
.api-container{padding:50px 0 100px 0;background: #fff;}
.api-container h4{font-family:'Univers55';color: #333333;font-size: 24px;line-height: 32px;}
.api-container .text-center .btn{margin: 50px 0 0 0;background:#f26522;}
#footer{background:#0f0708;padding:25px 0 18px 0;text-align: center;}
#footer p{margin:0 0 7px;padding: 0;color: #fff;font-size:12px;line-height:17px;}
#footer p a,
#footer p a:hover{color:#01b6f2;text-decoration: none;}
@media only screen and (max-width: 1200px){ 
    .white-bg {width: 34%;}
    .banner-wrap,
    .timeline{padding: 50px 0;}
    .timeline-column {margin: -130px 0 0 0;}
    .timeline-wrap {margin: 200px 0 0 0;}
}
@media only screen and (max-width: 992px){
    .logo img {max-width: 60%;}
    .white-bg {width: 100%;height: 90px;}
    #header .navbar {margin: 25px 0 0 0;}
    #header .navbar-nav {float: left;}
    main {padding:162px 0 0 0;}
    .banner-wrap,
    .timeline,
    .three-column-container{padding: 30px 0;}
    .banner-wrap h1 {font-size: 36px;line-height: 42px;margin: 0 0 15px;}
    .timeline h2,
    .three-column-container h3,
    .api-container h3{font-size: 36px;line-height: 42px;margin: 0 0 15px;}
    .timeline-column {padding: 10px 70px 10px 0;}
    .timeline-column.right-colum {padding: 10px 0 10px 70px;}
    .content h4 {font-size: 21px;padding: 0 15% 0 0;}
    .timeline-column.right-colum .content h4 {padding: 0 0 0 15%;}
    .timeline-column .timeline-number::after{width: 50px;}
    .timeline-column .timeline-number::before{right: 120px;}
    .timeline-column.right-colum .timeline-number::before {left: 120px;}
    .column-box {margin: 30px 0 0 0;min-height: 275px;}
    .api-container {padding: 0 0 50px 0;}
}
@media only screen and (max-width: 767px){
    body{font-size: 16px;}
    .white-bg {height:60px;}
    #header {padding: 15px 0 8px 0;}
    #header .navbar {margin: -48px 0 0 0;z-index: 9;}
    .logo{width: auto;z-index: 10;}
    .logo img {max-width:270px;}
    #header .navbar-default .navbar-toggle{background: none;border: none;margin:17px 0 0 0;padding: 0;}
    #header .navbar-toggle .icon-bar{width: 30px;background: #003f62;}
    #header .navbar-toggle .icon-bar + .icon-bar {margin-top: 7px;}
    #header .navbar-default .navbar-collapse{border: none;margin-top: 40px;}
    #header .navbar-nav {float: left;width: 100%;margin: 30px 0 15px 0;}
    #header .navbar-default .navbar-nav li:last-child a{float: left;margin-left: 15px;}
    #header .navbar-header{float: right;}
    main {padding:62px 0 0 0;}
    .banner-wrap h1,
    .timeline h2,
    .three-column-container h3,
    .api-container h3{font-size: 21px;line-height:29px;}
    .content h4 {font-size: 18px;line-height: 23px;}
    .column-box h4 {font-size:19px;line-height:25px;margin: 20px 0 5px 0;}
    .timeline-wrap {margin:25px 0 0 0;}
    .timeline-column,
    .timeline-column.right-colum{margin: 25px 0;padding: 0;width: 70%;left: 15%;}
    .timeline-column .timeline-number,
    .timeline-column.right-colum .timeline-number{position: relative;left: 0;top: 0;right: 0;display: inline-block;font-size: 24px;line-height: 50px;width: 50px;height: 50px;margin: 0 0 80px;}
    .timeline-wrap::after{display: none;}
    .content {text-align: center;}
    .timeline-column .timeline-number::after,
    .timeline-column.right-colum .timeline-number::after{width: 2px;height:40px;top: 50px;left: 50%;margin: 0 0 0 -1px;}
    .timeline-column .timeline-number::before,
    .timeline-column.right-colum .timeline-number::before{right: auto;top: 93px;left: 50%;margin:0 0 0 -6px;}
    .content h4,
    .timeline-column.right-colum .content h4{padding: 0;}
    .banner-wrap,
    .timeline,
    .three-column-container,
    .api-container{text-align: center;}
    .column-box {min-height:15px;}
    .api-container h4 {font-size: 18px;line-height: 27px;}
    ul.apilist li {margin:7px;}
    .api-container .text-center .btn {margin: 20px 0 0 0;}
    .api-container {padding: 0 0 30px 0;}
    .apilist-circle span {font-size: 21px;line-height: 27px;}
    .column-img{text-align: center !important;}
}
@media only screen and (max-width: 479px){
    .logo img {max-width: 220px;}
    .timeline-column,
    .timeline-column.right-colum {width: 80%;left: 10%;}
    .column-img{text-align: center !important;}
}
