/*-----------------------------------------------------------------------------------
    Template Name: Polite - Political HTML Template 
    Description: This is html5 template
    Author: power-boosts
    Version: 1.0.3


-----------------------------------------------------------------------------------
    
    [Table of contents] 
	
    1. Template default css
    2. Header area
    3. Search / #search
    4. Main menu
    5. Slider area
    6. service area
    7. Events area
    8. Counter area
    9. Team area
    10. timeline_1 area
    11. Latest news
    12. Contact area
    13. Footer area
    14. Scrollup
    15. Home page two
    16. Gallery
    17. About page
    18. Breadcrumbs area 
    19. Events details page
    20. Event details
    21. Team page
    22. Blog page
    23. Blog siderbar
    24. Blog details
    25. Contact page
    26. Donate page
    27. Events page
    
    
    
-----------------------------------------------------------------------------------*/
/*----------------------------------------*/
/*  1. Template default css
/*----------------------------------------*/
/* Google Fonts */

@import 'https://fonts.googleapis.com/css?family=Lora:400,700|Raleway:400,500,600,700';

@media only screen and (min-width: 1200px) {
    .container {
        max-width: 1170px;
    }
}

/*----------------------------------------
    10. timeline_1 area
----------------------------------------*/

.what-top.line {
    margin-bottom: 36px;
}
.timeline_1-area {
    background-color: #f6f6f6;
}
.timeline_1-wraper {
    width: 100%;
    position: relative;
}
.timeline_1-wraper::before {
    background: #dedede none repeat scroll 0 0;
    content: "";
    height: 95%;
    left: 50%;
    margin-left: -0.5px;
    position: absolute;
    top: 0;
    width: 1px;
}
.sin-timeline_1 {
    float: right;
    z-index: 9;
    position: relative;
}
.sin-timeline_1:hover {
    z-index: 8;
}
.sin-timeline_1:nth-child(2n) {
    margin-top: 259px;
    margin-bottom: 70px;
}
.sin-timeline_1::before {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #d2d2d2;
    border-radius: 50px;
    content: "";
    height: 11px;
    left: -6px;
    position: absolute;
    right: auto;
    top: 89px;
    width: 11px;
}
.sin-timeline_1:hover::before {
    border: 1px solid #ea000d;
    background: #ea000d;
}
.sin-timeline_1:nth-child(2n)::before {
    right: -6px;
    left: auto;
}
.sin-timeline_1::after {
/*    background: #ea000d none repeat scroll 0 0;
*/    bottom: 51%;
    content: "";
    height: 10000%;
    left: -0.5px;
    opacity: 0;
    position: absolute;
    width: 1px;
}
.sin-timeline_1:nth-child(2n)::after {
    left: auto;
    right: -0.5px;
}
.sin-timeline_1:hover::after {
    opacity: 1;
}
.timeline_1-date {
    color: #727272;
    display: block;
    font-size: 15px;
    letter-spacing: 0.3px;
    line-height: 14px;
    position: absolute;
    top: 87px;
}
.sin-timeline_1:hover .timeline_1-date {
    color: #ea000d;
}
.timeline_1-content {
    border: 1px solid #e7e7e7;
    display: block;
    width: 100%;
}
.sin-timeline_1:nth-child(2n) .timeline_1-content {} .sin-timeline_1:nth-child(2n+1) .timeline_1-content {} .sin-timeline_1:nth-child(2n) .timeline_1-date {
    right: -100px;
}
.sin-timeline_1:nth-child(2n+1) .timeline_1-date {
    left: -100px;
}
.timeline_1-img {
    display: block;
    float: left;
    position: relative;
    width: 220px;
}
.timeline_1-img::before {
    border-color: transparent #333 transparent transparent;
    border-style: solid;
    border-width: 9px;
    content: "";
    height: 0;
    left: -18px;
    position: absolute;
    top: 84px;
}
.sin-timeline_1:nth-child(2n) .timeline_1-img::before {
    right: -18px;
    left: auto;
    border-left: 9px solid #333;
    border-right: 9px solid transparent;
}
.timeline_1-text > h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 19px;
}
.timeline_1-text > h3 a {
    color: #333333;
}
.timeline_1-text {
    overflow: hidden;
    padding: 20px 20px 19px;
    text-align: center;
}
.sin-timeline_1:nth-child(2n) .timeline_1-img {
    float: right;
}
.sin-timeline_1:nth-child(2n) {
    padding-right: 35px;
}
.sin-timeline_1:nth-child(2n+1) {
    padding-left: 35px;
}
.timeline_1-text > p {
    color: #727272;
    line-height: 24px;
    font-size: 13px;
}
.timeline_1-text a.read-more {
    color: #333333;
    font-size: 13px;
    -webkit-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
}
.timeline_1-text a.read-more:hover {
    color: #ea000d;
}
.timeline_1-img > img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
}
.sin-timeline_1:hover .timeline_1-img > img {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}
.read-icon {
    bottom: 0;
    display: inline-block;
    left: 47%;
    position: absolute;
    z-index: 999;
}
.re-icon {
    display: block;
    margin-left: 30px;
    font-size: 13px;
    color: #666;
}
.read-icon > a {
    color: #666;
    font-size: 13px;
}