<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script src="https://kit.fontawesome.com/930411c5cd.js" crossorigin="anonymous"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body>
<div class="page_content">
<div class="content">
<header>
<div class="page_top">
</div>
<nav class="navbar navbar-expand-lg navStyle">
<a class="brand-navbar" href="#" style='margin-left:4%'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSohxuNEOfASjZFuPunLob4m4T0OrGAuDOIG83wZMpUKd66n5SK&usqp=CAU" alt="Responsive image" height="120px"></a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#mainMenu">
<span><i class="fas fa-align-right iconStyle"></i></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01" style='margin-left:5%'>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Primăria <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Noutăți</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Transparența decizională</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Informații de interes public</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contacte</a>
</li>
</ul>
<div class="form-inline my-2 my-lg-0">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#"><button class="btn btn-primary my-2 my-sm-0" style='border-radius:50%;'><i class="far fa-envelope text-white"></i></button></a>
</li>
<li class="nav-item">
<a href="#"><button class="btn btn-primary my-2 my-sm-0" style='border-radius:50%; margin-left:10%'><i class="fab fa-facebook-f text-white"></i></button></a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="row">
<div class="col-12 text-center pt-3">
<h4>Ultimele noutati</h4>
</div>
<div class="col-12 pb-5">
<!--SECTION START-->
<section class="row">
<!--Start slider news-->
<div class="col-12 col-md-6 pb-0 pb-md-3 pt-2 pr-md-1">
<div id="featured" class="carousel slide carousel" data-ride="carousel">
<!--dots navigate-->
<ol class="carousel-indicators top-indicator">
<li data-target="#featured" data-slide-to="0" class="active"></li>
<li data-target="#featured" data-slide-to="1"></li>
<li data-target="#featured" data-slide-to="2"></li>
<li data-target="#featured" data-slide-to="3"></li>
</ol>
<!--carousel inner-->
<div class="carousel-inner">
<!--Item slider-->
<div class="carousel-item active">
<div class="card border-0 rounded-0 text-light overflow zoom">
<div class="position-relative">
<!--thumbnail img-->
<div class="ratio_left-cover-1 image-wrapper">
<a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
<img class="img-fluid w-100"
src="https://bootstrap.news/source/img1.jpg"
alt="Bootstrap news template">
</a>
</div>
<div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow">
<!--title-->
<a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
<h2 class="h3 post-title text-white my-1">Bootstrap 4 template news portal magazine perfect for news site</h2>
</a>
<!-- meta title -->
<div class="news-meta">
<span class="news-author">by <a class="text-white font-weight-bold" href="../category/author.html">Jennifer</a></span>
<span class="news-date">Oct 22, 2019</span>
</div>
</div>
</div>
</div>
</div>
<!--Item slider-->
<div class="carousel-item">
<div class="card border-0 rounded-0 text-light overflow zoom">
<div class="position-relative">
<!--thumbnail img-->
<div class="ratio_left-cover-1 image-wrapper">
<a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
<img class="img-fluid w-100"
src="https://bootstrap.news/source/img2.jpg"
alt="Bootstrap news theme">
</a>
</div>
<div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow">
<!--title-->
<a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
<h2 class="h3 post-title text-white my-1">Walmart shares up 10% on online sales lift</h2>
</a>
<!-- meta title -->
<div class="news-meta">
<span class="news-author">by <a class="text-white font-weight-bold" href="../category/author.html">Jennifer</a></span>
<span class="news-date">Oct 22, 2019</span>
</div>
</div>
</div>
</div>
</div>
<!--Item slider-->
<div class="carousel-item">
<div class="card border-0 rounded-0 text-light overflow zoom">
<div class="position-relative">
<!--thumbnail img-->
<div class="ratio_left-cover-1 image-wrapper">
<a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
<img class="img-fluid w-100"
src="https://bootstrap.news/source/img3.jpg"
alt="Bootstrap blog template">
</a>
</div>
<div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow">
<!--title-->
<a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
<h2 class="h3 post-title text-white my-1">Bank chief warns on Brexit staff moves to other company</h2>
</a>
<!-- meta title -->
<div class="news-meta">
<span class="news-author">by <a class="text-white font-weight-bold" href="../category/author.html">Jennifer</a></span>
<span class="news-date">Oct 22, 2019</span>
</div>
</div>
</div>
</div>
</div>
<!--Item slider-->
<div class="carousel-item">
<div class="card border-0 rounded-0 text-light overflow zoom">
<div class="position-relative">
<!--thumbnail img-->
<div class="ratio_left-cover-1 image-wrapper">
<a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
<img class="img-fluid w-100"
src="https://bootstrap.news/source/img4.jpg"
alt="Bootstrap portal template">
</a>
</div>
<div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow">
<!--title-->
<a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
<h2 class="h3 post-title text-white my-1">The world's first floating farm making waves in Rotterdam</h2>
</a>
<!-- meta title -->
<div class="news-meta">
<span class="news-author">by <a class="text-white font-weight-bold" href="../category/author.html">Jennifer</a></span>
<span class="news-date">Oct 22, 2019</span>
</div>
</div>
</div>
</div>
</div>
<!--end item slider-->
</div>
<!--end carousel inner-->
</div>
<!--navigation-->
<a class="carousel-control-prev" href="#featured" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#featured" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--End slider news-->
<!--Start box news-->
<div class="col-12 col-md-6 pt-2 pl-md-1 mb-3 mb-lg-4">
<div class="row">
<!--news box-->
<div class="col-6 pb-1 pt-0 pr-1">
<div class="card border-0 rounded-0 text-white overflow zoom">
<div class="position-relative">
<!--thumbnail img-->
<div class="ratio_right-cover-2 image-wrapper">
<a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
<img class="img-fluid"
src="https://bootstrap.news/source/img5.jpg"
alt="simple blog template bootstrap">
</a>
</div>
<div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow">
<!-- category -->
<a class="p-1 badge badge-primary rounded-0" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">Lifestyle</a>
<!--title-->
<a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
<h2 class="h5 text-white my-1">Should you see the Fantastic Beasts sequel?</h2>
</a>
</div>
</div>
</div>
</div>
<!--news box-->
<div class="col-6 pb-1 pl-1 pt-0">
<div class="card border-0 rounded-0 text-white overflow zoom">
<div class="position-relative">
<!--thumbnail img-->
<div class="ratio_right-cover-2 image-wrapper">
<a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
<img class="img-fluid"
src="https://bootstrap.news/source/img6.jpg"
alt="bootstrap templates for blog">
</a>
</div>
<div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow">
<!-- category -->
<a class="p-1 badge badge-primary rounded-0" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">Motocross</a>
<!--title-->
<a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
<h2 class="h5 text-white my-1">Three myths about Florida elections recount</h2>
</a>
</div>
</div>
</div>
</div>
<!--news box-->
<div class="col-6 pb-1 pr-1 pt-1">
<div class="card border-0 rounded-0 text-white overflow zoom">
<div class="position-relative">
<!--thumbnail img-->
<div class="ratio_right-cover-2 image-wrapper">
<a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
<img class="img-fluid"
src="https://bootstrap.news/source/img7.jpg"
alt="bootstrap blog wordpress theme">
</a>
</div>
<div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow">
<!-- category -->
<a class="p-1 badge badge-primary rounded-0" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">Fitness</a>
<!--title-->
<a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
<h2 class="h5 text-white my-1">Finding Empowerment in Two Wheels and a Helmet</h2>
</a>
</div>
</div>
</div>
</div>
<!--news box-->
<div class="col-6 pb-1 pl-1 pt-1">
<div class="card border-0 rounded-0 text-white overflow zoom">
<div class="position-relative">
<!--thumbnail img-->
<div class="ratio_right-cover-2 image-wrapper">
<a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
<img class="img-fluid"
src="https://bootstrap.news/source/img8.jpg"
alt="blog website templates bootstrap">
</a>
</div>
<div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow">
<!-- category -->
<a class="p-1 badge badge-primary rounded-0" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">Adventure</a>
<!--title-->
<a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
<h2 class="h5 text-white my-1">Ditch receipts and four other tips to be a shopper</h2>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<div class="row">
<div class="col-3">
Others
</div>
<div class="col-9">
<div class="row">
<div class="col-md-12">
<div class="main-timeline4">
<div class="timeline">
<a href="#" class="timeline-content">
<span class="year">2018</span>
<div class="inner-content">
<h3 class="title">Web Designer</h3>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ex odio, rhoncus sit amet tincidunt eu, suscipit a orci. In suscipit quam eget dui auctor.
</p>
</div>
</a>
</div>
<div class="timeline">
<a href="#" class="timeline-content">
<span class="year">2017</span>
<div class="inner-content">
<h3 class="title">Web Developer</h3>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ex odio, rhoncus sit amet tincidunt eu, suscipit a orci. In suscipit quam eget dui auctor.
</p>
</div>
</a>
</div>
<div class="timeline">
<a href="#" class="timeline-content">
<span class="year">2016</span>
<div class="inner-content">
<h3 class="title">Web Designer</h3>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ex odio, rhoncus sit amet tincidunt eu, suscipit a orci. In suscipit quam eget dui auctor.
</p>
</div>
</a>
</div>
<div class="timeline">
<a href="#" class="timeline-content">
<span class="year">2015</span>
<div class="inner-content">
<h3 class="title">Web Developer</h3>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ex odio, rhoncus sit amet tincidunt eu, suscipit a orci. In suscipit quam eget dui auctor.
</p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="row" style='width:80%; margin: 0 auto'>
<div class="col-3">
<div class="row">
<div class="col-4">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSohxuNEOfASjZFuPunLob4m4T0OrGAuDOIG83wZMpUKd66n5SK&usqp=CAU" alt="Responsive image" height="120px"></a>
</div>
<div class="col-8">
<h4><br>Site-ul primăriei Vadului lui Isac</h4>
</div>
</div>
</div>
<div class="col-7"></div>
<div class="col-2" style='width:85%; margin: 0 auto;'>
<div class="footer_links">
<ul>
<li>
<a href="#"><button class="btn btn-primary my-2 my-sm-0" style="border-radius:50%;"><i class="far fa-envelope text-white"></i></button></a>
</li>
<li>
<a href="#"><button class="btn btn-primary my-2 my-sm-0" style="border-radius:50%;"><i class="fab fa-instagram text-white"></i></button></a>
</li>
<li>
<a href="#"><button class="btn btn-primary my-2 my-sm-0" style='border-radius:50%;'><i class="fab fa-facebook-f"></i></button></a>
</li>
<li>
<a href="#"><button class="btn btn-primary my-2 my-sm-0" style='border-radius:50%;'><i class="fab fa-youtube text-white"></i></button></a>
</li>
</ul>
</div>
</div>
</div>
</footer>
</div>
</div>
</body>
body {
background: #599fd9;
background: -webkit-linear-gradient(to right, #599fd9, #c2e59c);
background: linear-gradient(to right, #599fd9, #c2e59c);
font-family: Open Sans, "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
}
.page_content
{
width:85%;
margin: 0 auto;
margin-top:3%;
}
.content
{
background-color:white;
border-top-right-radius:65px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.navbar
{
background-color: black;
border-top-right-radius:65px;
height:120px;
}
.navbar .brand-navbar img:hover
{
opacity: 0.7;
}
.navbar a, a:link
{
color:#cc181e
}
.navbar a:hover
{
color:white;
}
.b-0 {
bottom: 0;
}
.bg-shadow {
background: rgba(76, 76, 76, 0);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(179, 171, 171, 0)), color-stop(49%, rgba(48, 48, 48, 0.37)), color-stop(100%, rgba(19, 19, 19, 0.8)));
background: linear-gradient(to bottom, rgba(179, 171, 171, 0) 0%, rgba(48, 48, 48, 0.71) 49%, rgba(19, 19, 19, 0.8) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313', GradientType=0 );
}
.top-indicator {
right: 0;
top: 1rem;
bottom: inherit;
left: inherit;
margin-right: 1rem;
}
.overflow {
position: relative;
overflow: hidden;
}
.zoom img {
transition: all 0.2s linear;
}
.zoom:hover img {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
a{text-decoration:none}
h4{text-align:center;margin:30px 0;color:#444}
.main-timeline{position:relative}
.main-timeline:before{content:"";width:5px;height:100%;border-radius:20px;margin:0 auto;background:#242922;position:absolute;top:0;left:0;right:0}
.main-timeline .timeline{display:inline-block;margin-bottom:50px;position:relative}
.main-timeline .timeline:before{content:"";width:20px;height:20px;border-radius:50%;border:4px solid #fff;background:#ec496e;position:absolute;top:50%;left:50%;z-index:1;transform:translate(-50%,-50%)}
.main-timeline .timeline-icon{display:inline-block;width:130px;height:130px;border-radius:50%;border:3px solid #ec496e;padding:13px;text-align:center;position:absolute;top:50%;left:30%;transform:translateY(-50%)}
.main-timeline .timeline-icon i{display:block;border-radius:50%;background:#ec496e;font-size:64px;color:#fff;line-height:100px;z-index:1;position:relative}
.main-timeline .timeline-icon:after,.main-timeline .timeline-icon:before{content:"";width:100px;height:4px;background:#ec496e;position:absolute;top:50%;right:-100px;transform:translateY(-50%)}
.main-timeline .timeline-icon:after{width:70px;height:50px;background:#fff;top:89px;right:-30px}
.main-timeline .timeline-content{width:50%;padding:0 50px;margin:52px 0 0;float:right;position:relative}
.main-timeline .timeline-content:before{content:"";width:70%;height:100%;border:3px solid #ec496e;border-top:none;border-right:none;position:absolute;bottom:-13px;left:35px}
.main-timeline .timeline-content:after{content:"";width:37px;height:3px;background:#ec496e;position:absolute;top:13px;left:0}
.main-timeline .title{font-size:20px;font-weight:600;color:#ec496e;text-transform:uppercase;margin:0 0 5px}
.main-timeline .description{display:inline-block;font-size:16px;color:#404040;line-height:20px;letter-spacing:1px;margin:0}
.main-timeline .timeline:nth-child(even) .timeline-icon{left:auto;right:30%}
.main-timeline .timeline:nth-child(even) .timeline-icon:before{right:auto;left:-100px}
.main-timeline .timeline:nth-child(even) .timeline-icon:after{right:auto;left:-30px}
.main-timeline .timeline:nth-child(even) .timeline-content{float:left}
.main-timeline .timeline:nth-child(even) .timeline-content:before{left:auto;right:35px;transform:rotateY(180deg)}
.main-timeline .timeline:nth-child(even) .timeline-content:after{left:auto;right:0}
.main-timeline .timeline:nth-child(2n) .timeline-content:after,.main-timeline .timeline:nth-child(2n) .timeline-icon i,.main-timeline .timeline:nth-child(2n) .timeline-icon:before,.main-timeline .timeline:nth-child(2n):before{background:#f9850f}
.main-timeline .timeline:nth-child(2n) .timeline-icon{border-color:#f9850f}
.main-timeline .timeline:nth-child(2n) .title{color:#f9850f}
.main-timeline .timeline:nth-child(2n) .timeline-content:before{border-left-color:#f9850f;border-bottom-color:#f9850f}
.main-timeline .timeline:nth-child(3n) .timeline-content:after,.main-timeline .timeline:nth-child(3n) .timeline-icon i,.main-timeline .timeline:nth-child(3n) .timeline-icon:before,.main-timeline .timeline:nth-child(3n):before{background:#8fb800}
.main-timeline .timeline:nth-child(3n) .timeline-icon{border-color:#8fb800}
.main-timeline .timeline:nth-child(3n) .title{color:#8fb800}
.main-timeline .timeline:nth-child(3n) .timeline-content:before{border-left-color:#8fb800;border-bottom-color:#8fb800}
.main-timeline .timeline:nth-child(4n) .timeline-content:after,.main-timeline .timeline:nth-child(4n) .timeline-icon i,.main-timeline .timeline:nth-child(4n) .timeline-icon:before,.main-timeline .timeline:nth-child(4n):before{background:#2fcea5}
.main-timeline .timeline:nth-child(4n) .timeline-icon{border-color:#2fcea5}
.main-timeline .timeline:nth-child(4n) .title{color:#2fcea5}
.main-timeline .timeline:nth-child(4n) .timeline-content:before{border-left-color:#2fcea5;border-bottom-color:#2fcea5}
@media only screen and (max-width:1200px){.main-timeline .timeline-icon:before{width:50px;right:-50px}
.main-timeline .timeline:nth-child(even) .timeline-icon:before{right:auto;left:-50px}
.main-timeline .timeline-content{margin-top:75px}
}
@media only screen and (max-width:990px){.main-timeline .timeline{margin:0 0 10px}
.main-timeline .timeline-icon{left:25%}
.main-timeline .timeline:nth-child(even) .timeline-icon{right:25%}
.main-timeline .timeline-content{margin-top:115px}
}
@media only screen and (max-width:767px){.main-timeline{padding-top:50px}
.main-timeline:before{left:80px;right:0;margin:0}
.main-timeline .timeline{margin-bottom:70px}
.main-timeline .timeline:before{top:0;left:83px;right:0;margin:0}
.main-timeline .timeline-icon{width:60px;height:60px;line-height:40px;padding:5px;top:0;left:0}
.main-timeline .timeline:nth-child(even) .timeline-icon{left:0;right:auto}
.main-timeline .timeline-icon:before,.main-timeline .timeline:nth-child(even) .timeline-icon:before{width:25px;left:auto;right:-25px}
.main-timeline .timeline-icon:after,.main-timeline .timeline:nth-child(even) .timeline-icon:after{width:25px;height:30px;top:44px;left:auto;right:-5px}
.main-timeline .timeline-icon i{font-size:30px;line-height:45px}
.main-timeline .timeline-content,.main-timeline .timeline:nth-child(even) .timeline-content{width:100%;margin-top:-15px;padding-left:130px;padding-right:5px}
.main-timeline .timeline:nth-child(even) .timeline-content{float:right}
.main-timeline .timeline-content:before,.main-timeline .timeline:nth-child(even) .timeline-content:before{width:50%;left:120px}
.main-timeline .timeline:nth-child(even) .timeline-content:before{right:auto;transform:rotateY(0)}
.main-timeline .timeline-content:after,.main-timeline .timeline:nth-child(even) .timeline-content:after{left:85px}
}
@media only screen and (max-width:479px){.main-timeline .timeline-content,.main-timeline .timeline:nth-child(2n) .timeline-content{padding-left:110px}
.main-timeline .timeline-content:before,.main-timeline .timeline:nth-child(2n) .timeline-content:before{left:99px}
.main-timeline .timeline-content:after,.main-timeline .timeline:nth-child(2n) .timeline-content:after{left:65px}
}
/******************* Timeline Demo - 4 *****************/
.main-timeline4{overflow:hidden;position:relative}
.main-timeline4:before{content:"";width:5px;height:70%;background:#333;position:absolute;top:70px;left:50%;transform:translateX(-50%)}
.main-timeline4 .timeline-content:before,.main-timeline4 .timeline:before{top:50%;transform:translateY(-50%);content:""}
.main-timeline4 .timeline{width:50%;padding-left:100px;float:right;position:relative}
.main-timeline4 .timeline:before{width:20px;height:20px;border-radius:50%;background:#fff;border:5px solid #333;position:absolute;left:-10px}
.main-timeline4 .timeline-content{display:block;padding-left:150px;position:relative}
.main-timeline4 .timeline-content:before{width:90px;height:10px;border-top:7px dotted #333;position:absolute;left:-92px}
.main-timeline4 .year{display:inline-block;width:120px;height:120px;line-height:100px;border-radius:50%;border:10px solid #f54957;font-size:30px;color:#f54957;text-align:center;box-shadow:inset 0 0 10px rgba(0,0,0,.4);position:absolute;top:0;left:0}
.main-timeline4 .year:before{content:"";border-left:20px solid #f54957;border-top:10px solid transparent;border-bottom:10px solid transparent;position:absolute;bottom:-13px;right:0;transform:rotate(45deg)}
.main-timeline4 .inner-content{padding:20px 0}
.main-timeline4 .title{font-size:24px;font-weight:600;color:#f54957;text-transform:uppercase;margin:0 0 5px}
.main-timeline4 .description{font-size:14px;color:#6f6f6f;margin:0 0 5px}
.main-timeline4 .timeline:nth-child(2n){padding:0 100px 0 0}
.main-timeline4 .timeline:nth-child(2n) .timeline-content:before,.main-timeline4 .timeline:nth-child(2n) .year,.main-timeline4 .timeline:nth-child(2n):before{left:auto;right:-10px}
.main-timeline4 .timeline:nth-child(2n) .timeline-content{padding:0 150px 0 0}
.main-timeline4 .timeline:nth-child(2n) .timeline-content:before{right:-92px}
.main-timeline4 .timeline:nth-child(2n) .year{right:0}
.main-timeline4 .timeline:nth-child(2n) .year:before{right:auto;left:0;border-left:none;border-right:20px solid #f54957;transform:rotate(-45deg)}
.main-timeline4 .timeline:nth-child(2){margin-top:110px}
.main-timeline4 .timeline:nth-child(odd){margin:-110px 0 0}
.main-timeline4 .timeline:nth-child(even){margin-bottom:80px}
.main-timeline4 .timeline:first-child,.main-timeline4 .timeline:last-child:nth-child(even){margin:0}
.main-timeline4 .timeline:nth-child(2n) .year{border-color:#1ebad0;color:#1ebad0}
.main-timeline4 .timeline:nth-child(2) .year:before{border-right-color:#1ebad0}
.main-timeline4 .timeline:nth-child(2n) .title{color:#1ebad0}
.main-timeline4 .timeline:nth-child(3n) .year{border-color:#7cba01;color:#7cba01}
.main-timeline4 .timeline:nth-child(3) .year:before{border-left-color:#7cba01}
.main-timeline4 .timeline:nth-child(3n) .title{color:#7cba01}
.main-timeline4 .timeline:nth-child(4n) .year{border-color:#f8781f;color:#f8781f}
.main-timeline4 .timeline:nth-child(4) .year:before{border-right-color:#f8781f}
.main-timeline4 .timeline:nth-child(4n) .title{color:#f8781f}
@media only screen and (max-width:1200px){.main-timeline4 .year{top:50%;transform:translateY(-50%)}
}
@media only screen and (max-width:990px){.main-timeline4 .timeline{padding-left:75px}
.main-timeline4 .timeline:nth-child(2n){padding:0 75px 0 0}
.main-timeline4 .timeline-content{padding-left:130px}
.main-timeline4 .timeline:nth-child(2n) .timeline-content{padding:0 130px 0 0}
.main-timeline4 .timeline-content:before{width:68px;left:-68px}
.main-timeline4 .timeline:nth-child(2n) .timeline-content:before{right:-68px}
}
@media only screen and (max-width:767px){.main-timeline4{overflow:visible}
.main-timeline4:before{height:100%;top:0;left:0;transform:translateX(0)}
.main-timeline4 .timeline:before,.main-timeline4 .timeline:nth-child(2n):before{top:60px;left:-9px;transform:translateX(0)}
.main-timeline4 .timeline,.main-timeline4 .timeline:nth-child(even),.main-timeline4 .timeline:nth-child(odd){width:100%;float:none;text-align:center;padding:0;margin:0 0 10px}
.main-timeline4 .timeline-content,.main-timeline4 .timeline:nth-child(2n) .timeline-content{padding:0}
.main-timeline4 .timeline-content:before,.main-timeline4 .timeline:nth-child(2n) .timeline-content:before{display:none}
.main-timeline4 .timeline:nth-child(2n) .year,.main-timeline4 .year{position:relative;transform:translateY(0)}
.main-timeline4 .timeline:nth-child(2n) .year:before,.main-timeline4 .year:before{border:none;border-right:20px solid #f54957;border-top:10px solid transparent;border-bottom:10px solid transparent;top:50%;left:-23px;bottom:auto;right:auto;transform:rotate(0)}
.main-timeline4 .timeline:nth-child(2n) .year:before{border-right-color:#1ebad0}
.main-timeline4 .timeline:nth-child(3n) .year:before{border-right-color:#7cba01}
.main-timeline4 .timeline:nth-child(4n) .year:before{border-right-color:#f8781f}
.main-timeline4 .inner-content{padding:10px}
}
.footer {
position: relative;
width: 100%;
min-height: 140px;
background: #eee;
padding: 10px 0;
z-index: 1;
}
.footer .footer_links ul {z-index: 1;display: block;width: 100%;padding: 0;text-align: right;position: absolute;right: 7%;box-sizing: border-box; margin-top:20%;}
.footer .footer_links ul li {display: inline-block;text-align: center;line-height: 0;}
