@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:100,300,400,700');
@import url('https://fonts.googleapis.com/css?family=Raleway:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');

section .container .row .col-md-3 .card{

    transition: transform 420ms;
} 

section .container .row .col-md-3 .card:hover{

    transform: scale(1.09);
}
body{
    background-color: #f7f7f7;
    margin-top:20px;
}

.nav-menu {
    padding: 0;
    display: block;
  }
  
  .nav-menu * {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  .nav-menu>ul>li {
    position: relative;
    white-space: nowrap;
  }
  
  .nav-menu a,
  .nav-menu a:focus {
    display: flex;
    align-items: center;
    color: #45505b;
    padding: 10px 18px;
    margin-bottom: 8px;
    transition: 0.3s;
    font-size: 15px;
    border-radius: 50px;
    background: #f2f3f5;
    height: 56px;
    width: 100%;
    overflow: hidden;
    transition: 0.3s;
  }
  
  .nav-menu a i,
  .nav-menu a:focus i {
    font-size: 20px;
  }
  
  .nav-menu a span,
  .nav-menu a:focus span {
    padding: 0 5px 0 7px;
    color: #45505b;
  }
  
  @media (min-width: 992px) {
  
    .nav-menu a,
    .nav-menu a:focus {
      width: 56px;
    }
  
    .nav-menu a span,
    .nav-menu a:focus span {
      display: none;
      color: #fff;
    }
  }
  
  .nav-menu a:hover,
  .nav-menu .active,
  .nav-menu .active:focus,
  .nav-menu li:hover>a {
    color: #fff;
    background: #0563bb;
  }
  
  .nav-menu a:hover span,
  .nav-menu .active span,
  .nav-menu .active:focus span,
  .nav-menu li:hover>a span {
    color: #fff;
  }
  
  .nav-menu a:hover,
  .nav-menu li:hover>a {
    width: 100%;
    color: #fff;
  }
  
  .nav-menu a:hover span,
  .nav-menu li:hover>a span {
    display: block;
  }
  

.main-timeline {
    position: relative
}

.main-timeline:before {
    content: "";
    display: block;
    width: 2px;
    height: 100%;
    background: black;
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0
}

.main-timeline .timeline {
    margin-bottom: 40px;
    position: relative
}

.main-timeline .timeline:after {
    content: "";
    display: block;
    clear: both
}

.main-timeline .icon {
    width: 18px;
    height: 18px;
    line-height: 18px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0
}

.main-timeline .icon:before,
.main-timeline .icon:after {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.33s ease-out 0s
}

.main-timeline .icon:before {
    background: #fff;
    border: 2px solid #232323;
    left: -3px
}

.main-timeline .icon:after {
    border: 2px solid #c6c6c6;
    left: 3px
}

.main-timeline .timeline:hover .icon:before {
    left: 3px
}

.main-timeline .timeline:hover .icon:after {
    left: -3px
}

.main-timeline .date-content {
    width: 50%;
    float: left;
    margin-top: 22px;
    position: relative
}

.main-timeline .date-content:before {
    content: "";
    width: 36.5%;
    height: 2px;
    background: black;
    margin: auto 0;
    position: absolute;
    top: 0;
    right: 10px;
    bottom: 0
}

.main-timeline .date-outer {
    width: 125px;
    height: 125px;
    font-size: 16px;
    text-align: center;
    margin: auto;
    z-index: 1
}

.main-timeline .date-outer:before,
.main-timeline .date-outer:after {
    content: "";
    width: 125px;
    height: 125px;
    margin: 0 auto;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transition: all 0.33s ease-out 0s
}

.main-timeline .date-outer:before {
    background: #fff;
    border: 2px solid #232323;
    left: -6px
}

.main-timeline .date-outer:after {
    border: 2px solid #c6c6c6;
    left: 6px
}

.main-timeline .timeline:hover .date-outer:before {
    left: 6px
}

.main-timeline .timeline:hover .date-outer:after {
    left: -6px
}

.main-timeline .date {
    width: 100%;
    margin: auto;
    position: absolute;
    top: 27%;
    left: 0
}

.main-timeline .month {
    font-size: 18px;
    font-weight: 700
}

.main-timeline .year {
    display: block;
    font-size: 30px;
    font-weight: 700;
    color: #232323;
    line-height: 36px
}

.main-timeline .timeline-content {
    width: 50%;
    padding: 20px 0 20px 50px;
    float: right
}

.main-timeline .title {
    font-size: 19px;
    font-weight: 700;
    line-height: 24px;
    margin: 0 0 15px 0
}

.main-timeline .description {
    margin-bottom: 0
}

.main-timeline .timeline:nth-child(2n) .date-content {
    float: right
}

.main-timeline .timeline:nth-child(2n) .date-content:before {
    left: 10px
}

.main-timeline .timeline:nth-child(2n) .timeline-content {
    padding: 20px 50px 20px 0;
    text-align: right
}

@media only screen and (max-width: 991px) {
    .main-timeline .date-content {
        margin-top: 35px
    }
    .main-timeline .date-content:before {
        width: 22.5%
    }
    .main-timeline .timeline-content {
        padding: 10px 0 10px 30px
    }
    .main-timeline .title {
        font-size: 17px
    }
    .main-timeline .timeline:nth-child(2n) .timeline-content {
        padding: 10px 30px 10px 0
    }
}

@media only screen and (max-width: 767px) {
    .main-timeline:before {
        margin: 0;
        left: 7px
    }
    .main-timeline .timeline {
        margin-bottom: 20px
    }
    .main-timeline .timeline:last-child {
        margin-bottom: 0
    }
    .main-timeline .icon {
        margin: auto 0
    }
    .main-timeline .date-content {
        width: 95%;
        float: right;
        margin-top: 0
    }
    .main-timeline .date-content:before {
        display: none
    }
    .main-timeline .date-outer {
        width: 110px;
        height: 110px
    }
    .main-timeline .date-outer:before,
    .main-timeline .date-outer:after {
        width: 110px;
        height: 110px
    }
    .main-timeline .date {
        top: 30%
    }
    .main-timeline .year {
        font-size: 24px
    }
    .main-timeline .timeline-content,
    .main-timeline .timeline:nth-child(2n) .timeline-content {
        width: 95%;
        text-align: center;
        padding: 10px 0
    }
    .main-timeline .title {
        margin-bottom: 10px
    }
}

*{
    box-sizing: border-box;
  }
  
  
  /* body {
    background-color: #D2DBDD;
    display: flex;
    display: -webkit-flex;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    justify-content: center;
    align-items: center;
  }
   */
  .cards {
      width: 100%;
      display: flex;
      display: -webkit-flex;
      justify-content: center;
      -webkit-justify-content: center;
      max-width: 820px;
  }
  
  .card--1 .cardd__img, .card--1 .cardd__img--hover {
      background-image: url(gp1.jpg);
  }
  
  .card--2 .cardd__img, .card--2 .cardd__img--hover {
      background-image: url(cls5.jpg);
  }
  
  .card--3 .cardd__img, .card--3 .cardd__img--hover {
    background-image: url(gp2.jpg);
}

.card--4 .cardd__img, .card--4 .cardd__img--hover {
    background-image: url(gp4.jpg);
}
  .cardd__like {
      width: 18px;
  }
  
  .cardd__clock {
      width: 15px;
    vertical-align: middle;
      fill: #AD7D52;
  }
  .cardd__time {
      font-size: 12px;
      color: #AD7D52;
      vertical-align: middle;
      margin-left: 5px;
  }
  
  .cardd__clock-info {
      float: right;
  }
  
  .cardd__img {
    visibility: hidden;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      width: 100%;
      height: 235px;
    border-top-left-radius: 12px;
  border-top-right-radius: 12px;
    
  }
  
  .cardd__info-hover {
      position: absolute;
      padding: 16px;
    width: 100%;
    opacity: 0;
    top: 0;
  }
  
  .cardd__img--hover {
    transition: 0.2s all ease-out;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      width: 100%;
    position: absolute;
      height: 235px;
    border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  top: 0;
    
  }
  .cardd {
    margin-right: 25px;
    transition: all .4s cubic-bezier(0.175, 0.885, 0, 1);
    background-color: #fff;
      width: 33.3%;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0px 13px 10px -7px rgba(0, 0, 0,0.1);
  }
  .cardd:hover {
    box-shadow: 0px 30px 18px -8px rgba(0, 0, 0,0.1);
      transform: scale(1.10, 1.10);
  }
  
  .cardd__info {
  z-index: 2;
    background-color: #fff;
    border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
     padding: 16px 24px 24px 24px;
  }
  
  .cardd__category {
      font-family: 'Raleway', sans-serif;
      text-transform: uppercase;
      font-size: 13px;
      letter-spacing: 2px;
      font-weight: 500;
    color: #868686;
  }
  
  .cardd__title {
      margin-top: 5px;
      margin-bottom: 10px;
      font-family: 'Roboto Slab', serif;
  }
  
  .cardd__by {
      font-size: 12px;
      font-family: 'Raleway', sans-serif;
      font-weight: 500;
  }
  
  .cardd__author {
      font-weight: 600;
      text-decoration: none;
      color: #AD7D52;
  }
  
  .cardd:hover .cardd__img--hover {
      height: 100%;
      opacity: 0.3;
  }
  
  .cardd:hover .cardd__info {
      background-color: transparent;
      position: relative;
  }
  
  .cardd:hover .cardd__info-hover {
      opacity: 1;
  }