/* Liste colore */

.color-list {
    display: flex;
    /* 
    On small displays we want each .color stacked.
    Flexbox let's us determine stacking direction via
    flex-direction: column;
  */
    flex-direction: column;
    /*height: 100vh;*/
}

.color {
    /*
    Each .color is also a flex item. We do this so that we have reasonable
    distribution of space between elements. We use flex-direction so that
    flexbox knows which way to position each element (in this case, vertical).
  */
    display: flex;
    flex-direction: column;
    /*
    .color can grow but not shrink (we want space for first three elements).
    10em is enough space to see name, hsl, and hex values. 
    Try shrinking vertically on a small display.
  */
    flex: 1 0 10em;
    box-shadow: 0 0 10px #424242;
    /* Handles any clipping/overflow issues on transition */
    overflow: hidden;
    padding: 1em;
    color: white;
    background: linear-gradient(180deg, rgba(21, 173, 176, 1) 0%, rgba(67, 147, 174, 1) 100%) !important
    /*transition: flex-basis 500ms ease-in-out;*/
}

.color:hover {
    /*
    Change the flex-basis so that we know what
    size to transition to on hover. Arbitrary,
    based on our design/content.
  */
    flex-basis: 20em;
}

.color:hover .details {
    opacity: 1;
}

.name {
    font-size: 1.6em;
    font-weight: 500;
    color: #fff;
}

.details {
    margin: 0;
    padding: 0;
    list-style: none;
    opacity: 0;
    transition: opacity 500ms ease-in-out;
}

.details li {
    font-size: 1em;
    line-height: 2em;
}

@media (min-width: 600px) {
    .color-list {
        /*
      Change the direction so that each .color
      aligns horizontally
    */
        flex-direction: row;
    }
    .color {
        /*
      No scrollbars on mobile
    */
        flex-shrink: 1;
    }
}

/* Tabulation */

/* Android 2.3 :checked fix */

@-webkit-keyframes fake {
    from {
        opacity: 1;
    }
    to {
        opacity: 1;
    }
}

@keyframes fake {
    from {
        opacity: 1;
    }
    to {
        opacity: 1;
    }
}

.worko-tabs {
    margin: 0;
    width: 100%;
}

.worko-tabs .state {
    position: absolute;
    left: -10000px;
}

.worko-tabs .flex-tabs {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    flex-wrap: wrap;
}

.worko-tabs .flex-tabs .tab {
    -webkit-box-flex: 1;
    flex-grow: 1;
    max-height: 40px;
    margin: 0;
}

.worko-tabs .flex-tabs .panel {
    background-color: #fff;
    padding: 20px;
    min-height: 300px;
    display: none;
    width: 100%;
    flex-basis: auto;
}

.worko-tabs .tab {
    display: inline-block;
    padding: 10px;
    vertical-align: top;
    background-color: #eee;
    cursor: hand;
    cursor: pointer;
    border-left: 10px solid #ccc;
}

.worko-tabs .tab:hover {
    background-color: #fff;
}

#tab-one:checked~.tabs #tab-one-label, #tab-two:checked~.tabs #tab-two-label, #tab-three:checked~.tabs #tab-three-label, #tab-four:checked~.tabs #tab-four-label {
    background-color: #fff;
    cursor: default;
    border-left-color: #faa419;
}

#tab-one:checked~.tabs #tab-one-panel, #tab-two:checked~.tabs #tab-two-panel, #tab-three:checked~.tabs #tab-three-panel, #tab-four:checked~.tabs #tab-four-panel {
    display: block;
}

@media (max-width: 600px) {
    .flex-tabs {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
    }
    .flex-tabs .tab {
        background: #fff;
        border-bottom: 1px solid #ccc;
    }
    .flex-tabs .tab:last-of-type {
        border-bottom: none;
    }
    .flex-tabs #tab-one-label {
        -webkit-box-ordinal-group: 2;
        order: 1;
    }
    .flex-tabs #tab-two-label {
        -webkit-box-ordinal-group: 4;
        order: 3;
    }
    .flex-tabs #tab-three-label {
        -webkit-box-ordinal-group: 6;
        order: 5;
    }
    .flex-tabs #tab-four-label {
        -webkit-box-ordinal-group: 8;
        order: 7;
    }
    .flex-tabs #tab-one-panel {
        -webkit-box-ordinal-group: 3;
        order: 2;
    }
    .flex-tabs #tab-two-panel {
        -webkit-box-ordinal-group: 5;
        order: 4;
    }
    .flex-tabs #tab-three-panel {
        -webkit-box-ordinal-group: 7;
        order: 6;
    }
    .flex-tabs #tab-four-panel {
        -webkit-box-ordinal-group: 9;
        order: 8;
    }
    #tab-one:checked~.tabs #tab-one-label, #tab-two:checked~.tabs #tab-two-label, #tab-three:checked~.tabs #tab-three-label, #tab-four:checked~.tabs #tab-four-label {
        border-bottom: none;
    }
    #tab-one:checked~.tabs #tab-one-panel, #tab-two:checked~.tabs #tab-two-panel, #tab-three:checked~.tabs #tab-three-panel, #tab-four:checked~.tabs #tab-four-panel {
        border-bottom: 1px solid #ccc;
    }
}

/* 50 flex 50 */

.example-item {
    padding: 5%;
    border-radius: 5px;
    max-width: 80%;
}

.l-grid-half {
    width: 50%;
}

.l-flex-parent {
    /*by having a parent with flex-direction:row, the min-height bug in IE doesn't stick around.*/
    display: flex;
    flex-direction: row;
}

.l-flex-child {
    padding: 1em;
    min-height: auto;
    align-items: center;
    display: flex;
    /*if you have items within the child you'll need to make it display flex*/
    justify-content: center;
    flex-direction: column;
}

.t-purple {
    background-color: #224D82;
    color: #fff;
}

.t-white {
    background-color: #fff;
    color: #224D82;
}

.t-white .example-item {
    background: #224D82;
    color: #fff;
}

.t-purple .example-item {
    background: #fff;
    color: #000;
}

.cards {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cards__item {
    display: -webkit-box;
    display: flex;
    padding: 1rem;
}

@media (min-width: 40rem) {
    .cards__item {
        width: 50%;
    }
}

@media (min-width: 56rem) {
    .cards__item {
        width: 33.3333%;
    }
}

/*
.card {
    background-color: white;
    border-radius: 0.25rem;
    box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25);
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    overflow: hidden;
}

.card:hover .card__image {
    -webkit-filter: contrast(100%);
    filter: contrast(100%);
}

.card__content {
    display: -webkit-box;
    display: flex;
    -webkit-box-flex: 1;
    flex: 1 1 auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    padding: 1rem;
}

.card__image {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
    -webkit-filter: contrast(70%);
    filter: contrast(70%);
    overflow: hidden;
    position: relative;
    -webkit-transition: -webkit-filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91);
    transition: -webkit-filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91);
    transition: filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91);
    transition: filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91), -webkit-filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91);
}

.card__image::before {
    content: "";
    display: block;
    padding-top: 56.25%;
    display: none;
}

@media (min-width: 40rem) {
    .card__image::before {
        padding-top: 66.6%;
    }
}

.card__image--flowers {
    background-image: url(https://unsplash.it/800/600?image=82);
}

.card__image--river {
    background-image: url(https://unsplash.it/800/600?image=11);
}

.card__image--record {
    background-image: url(https://unsplash.it/800/600?image=39);
}

.card__image--fence {
    background-image: url(https://unsplash.it/800/600?image=59);
}

.card__title {
    color: #696969;
    font-size: 1.25rem;
    font-weight: 300;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.card__text {
    -webkit-box-flex: 1;
    flex: 1 1 auto;
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: 1.25rem;
}
*/

div#masonry {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 100vw;
    max-height: 800px;
    font-size: 0;
}

div#masonry img {
    width: 33.3%;
    transition: .8s opacity;
}

div#masonry:hover img {
    opacity: 0.3;
}

div#masonry:hover img:hover {
    opacity: 1;
}

/* fallback for earlier versions of Firefox */

@supports not (flex-wrap: wrap) {
    div#masonry {
        display: block;
    }
    div#masonry img {
        display: inline-block;
        vertical-align: top;
    }
}

.cards {
    padding: 15px;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-flow: row wrap;
}

.card {
    margin: 15px;
    width: calc((100% / 3) - 30px);
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

@media screen and (max-width: 991px) {
    .card {
        width: calc((100% / 2) - 30px);
    }
}

@media screen and (max-width: 767px) {
    .card {
        width: 100%;
    }
}

.card:hover .card__inner {
    background-color: #1abc9c;
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}

.card__inner {
    width: 100%;
    padding: 30px;
    position: relative;
    cursor: pointer;
    background-color: #949fb0;
    color: #eceef1;
    font-size: 1.5em;
    text-transform: uppercase;
    text-align: center;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.card__inner:after {
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.card__inner .fa {
    width: 100%;
    margin-top: .25em;
}

.card__expander {
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    background-color: #333a45;
    width: 100%;
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    text-transform: uppercase;
    color: #eceef1;
    font-size: 1.5em;
}

.card__expander .fa {
    font-size: 0.75em;
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}

.card__expander p {
    color: #fff;
}

.card__expander .fa:hover {
    opacity: 0.9;
}

.card.is-collapsed .card__inner:after {
    content: "";
    opacity: 0;
}

.card.is-collapsed .card__expander {
    max-height: 0;
    min-height: 0;
    overflow: hidden;
    margin-top: 0;
    opacity: 0;
}

.card.is-expanded .card__inner {
    background-color: #1abc9c;
}

.card.is-expanded .card__inner:after {
    content: "";
    opacity: 1;
    display: block;
    height: 0;
    width: 0;
    position: absolute;
    bottom: -30px;
    left: calc(50% - 15px);
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #333a45;
}

.card.is-expanded .card__inner .fa:before {
    content: "\f115";
}

.card.is-expanded .card__expander {
    max-height: 1000px;
    min-height: 200px;
    overflow: visible;
    margin-top: 30px;
    opacity: 1;
}

.card.is-expanded:hover .card__inner {
    -webkit-transform: scale(1);
    transform: scale(1);
}

.card.is-inactive .card__inner {
    pointer-events: none;
    opacity: 0.5;
}

.card.is-inactive:hover .card__inner {
    background-color: #949fb0;
    -webkit-transform: scale(1);
    transform: scale(1);
}

@media screen and (min-width: 992px) {
    .card:nth-of-type(3n+2) .card__expander {
        margin-left: calc(-100% - 30px);
    }
    .card:nth-of-type(3n+3) .card__expander {
        margin-left: calc(-200% - 60px);
    }
    .card:nth-of-type(3n+4) {
        clear: left;
    }
    .card__expander {
        width: calc(300% + 60px);
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .card:nth-of-type(2n+2) .card__expander {
        margin-left: calc(-100% - 30px);
    }
    .card:nth-of-type(2n+3) {
        clear: left;
    }
    .card__expander {
        width: calc(200% + 30px);
    }
}

.blog-posts .featured {
    width: 100% !important;
    height: 250px !important;
    margin: 0.5em 0 1em 0 !important;
}

.blog-posts .featured .image {
    height: 250px !important;
}

.blog-posts .featured .content {
    height: 250px !important;
}

.blog-posts .row {
    display: flex;
}

.blog-posts .row .post:last-child {
    margin-right: 0 !important;
}

.blog-posts .post {
    flex: 1;
    overflow: hidden;
    background: white;
    height: 200px;
    -moz-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
    margin-right: 1em;
    margin-bottom: 1em;
}

.blog-posts .post:hover {
    -moz-box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.1);
}

.blog-posts .post:hover .image {
    opacity: 0.8;
}

.blog-posts .post .image, .blog-posts .post .content {
    display: inline-block;
    position: relative;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
}

.blog-posts .post .image {
    float: left;
    width: 50%;
    height: 200px;
    background-size: cover;
    background-position: center center;
}

.blog-posts .post .image .time {
    background: rgba(255, 255, 255, 0.5);
    width: 50px;
    text-align: center;
    padding: 0.5em 0;
    color: #444;
}

.blog-posts .post .image .time .date {
    font-weight: bolder;
}

.blog-posts .post .image .time .month {
    font-size: 0.7rem;
}

.blog-posts .post .content {
    padding: 0.5em 1em;
    width: 50%;
    -moz-box-shadow: -2px 0 2px -1px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: -2px 0 2px -1px rgba(0, 0, 0, 0.1);
    box-shadow: -2px 0 2px -1px rgba(0, 0, 0, 0.1);
    height: 200px;
}

.blog-posts .post .content:before {
    content: '';
    position: absolute;
    background: white;
    width: 10px;
    height: 10px;
    top: 20%;
    left: -5px;
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -moz-box-shadow: -1px 0 2px -1px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: -1px 0 2px -1px rgba(0, 0, 0, 0.1);
    box-shadow: -1px 0 2px -1px rgba(0, 0, 0, 0.1);
}

.blog-posts .post .content h1 {
    font-weight: 600;
    line-height: 2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blog-posts .post .content p {
    font-weight: 300;
    font-size: 0.7rem;
    line-height: 1.5;
    margin-bottom: 0.5em;
    font-family: 'Merriweather', sans-serif;
}

.blog-posts .post .content .meta .icon-comment {
    font-size: 0.7em;
    line-height: 2;
    margin-top: auto;
}

.blog-posts img {
    max-width: 100%;
    height: auto;
}

@media screen and (max-width: 840px) {
    .blog-posts .row {
        display: block !important;
    }
    .blog-posts .row .post {
        width: 100%;
        margin: 0;
    }
}

@media screen and (max-width: 600px) {
    .content {
        width: 70% !important;
    }
    .image {
        width: 30% !important;
    }
}

/* clearfix */

.cf:before, .cf:after {
    content: " ";
    /* 1 */
    display: table;
    /* 2 */
}

.cf:after {
    clear: both;
}

.section-lead {
    max-width: 600px;
    margin: 1rem auto 1.5rem;
    text-align: center;
}

.service a {
    color: #5b7abb;
    display: block;
}

.service h4 {
    font-weight: 500;
    color: #56ceba;
    font-size: 2.8rem;
    margin: 1rem 0 0.6rem;
}

.services-grid {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: stretch;
}

.service {
    background: #fff;
    margin: 20px;
    padding: 20px;
    border-radius: 4px;
    text-align: center;
    -webkit-box-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    border: 2px solid #e7e7e7;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.service:hover {
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
}

.service i {
    font-size: 3.45rem;
    margin: 1rem 0;
}

.service1 i, .service1 h4, .service1 .cta {
    color: #224D82;
}

.service1:hover {
    border: 2px solid #42b7ca;
}

.service2 i, .service2 h4, .service2 .cta {
    color: #224D82;
}

.service2:hover {
    border: 2px solid #42b7ca;
}

.service3 i, .service3 h4, .service3 .cta {
    color: #224D82;
}

.service3:hover {
    border: 2px solid #42b7ca;
}

.service .cta span {
    font-size: 0.6rem;
}

.service>* {
    flex: 1 1 100%;
}

.service .cta {
    align-self: flex-end;
    color: #fff;
}

@media all and (max-width:900px) {
    .services-grid {
        display: -webkit-box;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
    }
}

.gallery-wrap {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 50vh;
}

.gallery-wrap img {
    height: 100% !important;
    object-fit: cover;
}

.item {
    flex: 1;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: none;
    transition: flex 0.8s ease;
}

.item:hover {
    flex: 5;
}

/*
.item-1 {
    background-image: url("https://images.unsplash.com/photo-1499198116522-4a6235013d63?auto=format&fit=crop&w=1233&q=80");
}

.item-2 {
    background-image: url("https://images.unsplash.com/photo-1492760864391-753aaae87234?auto=format&fit=crop&w=1336&q=80");
}

.item-3 {
    background-image: url("https://images.unsplash.com/photo-1503631285924-e1544dce8b28?auto=format&fit=crop&w=1234&q=80");
}

.item-4 {
    background-image: url("https://images.unsplash.com/photo-1510425463958-dcced28da480?auto=format&fit=crop&w=1352&q=80");
}

.item-5 {
    background-image: url("https://images.unsplash.com/photo-1503602642458-232111445657?auto=format&fit=crop&w=1234&q=80");
}
*/

.app {}

.app .container {
    width: 100%;
    max-width: 100%;
    padding: 0;
}

.accordions__controls {
    display: flex;
    justify-content: flex-end;
    padding-top: 10px;
    padding-bottom: 19px;
}

.accordions__control {
    font-weight: 600;
    font-size: 18px;
    color: #00a5a9;
    transition: color .3s ease-in-out;
    border: none;
    background: none;
    font-size: inherit;
    color: inherit;
    font-family: inherit;
    padding: 0;
    cursor: pointer;
    outline: none;
}

.accordions__control:hover, .accordions__control:focus {
    color: #031d3d;
}

.accordions__header {
    font-size: 32px;
    font-weight: 600;
    background-color: #f0f0f0;
    position: relative;
    border-bottom: solid 1px #d3d3d3;
}

.accordions__container {
    display: flex;
}

.accordions__title {
    position: relative;
    padding: 1.8rem;
    padding-right: 38px;
    flex: 1;
    z-index: 2;
    background-color: #224D82;
    margin: 0;
    color: #fff;
}

.accordions__title::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    border-bottom: solid 1px #d3d3d3;
    z-index: 1;
}

.accordions__button {
    color: white;
    padding: 0 1.5rem;
    line-height: 1;
    transition: padding .3s ease-in-out;
}

.accordions__button::before {
    content: '';
    background-color: #08ced2;
    position: absolute;
    top: 0;
    left: 50%;
    right: 0;
    bottom: 0;
    z-index: 1;
    border-bottom: solid 1px #09a5a8;
    cursor: pointer;
    transition: background-color .3s ease-in-out, border-color .3s ease-in-out;
}

.accordions__button:hover {
    padding-right: 38px;
}

.accordions__button:hover::before {
    background-color: #09a5a8;
}

.accordions__button:focus::before {
    background-color: #09a5a8;
}

.accordions__button:active, .accordions__button--active {
    padding: 0 1.5rem;
}

.accordions__button:active::before, .accordions__button--active::before {
    background-color: #031d3d !important;
    border-bottom: solid 1px #031730;
}

.accordions__button:active .accordions__icon, .accordions__button--active .accordions__icon {
    transform: rotate(45deg);
}

.accordions__icon {
    position: relative;
    z-index: 2;
    transition: transform .3s ease-in-out;
}

.accordions__content {
    background-color: white;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 1.2s ease-in-out, opacity .6s ease-in-out .6s, transform .6s ease-in-out .6s;
    transform: translateY(38px);
}

.accordions__content--expanded {
    max-height: 200vh;
    opacity: 1;
    padding-bottom: 76px;
    transform: none;
}

.rich-text {
    font-size: 18px;
    line-height: 32px;
}

.rich-text p {
    margin-top: 38px;
}

@import url(https://fonts.googleapis.com/css?family=Raleway:400,700);
.snip1572 {
    font-family: 'Raleway', Arial, sans-serif;
    position: relative;
    display: inline-block;
    overflow: hidden;
    margin: 10px;
    min-width: 230px;
    max-width: 315px;
    width: 100%;
    color: #000000;
    text-align: left;
    font-size: 16px;
    background: #ffffff;
}

.snip1572 *, .snip1572:before, .snip1572:after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.snip1572 img {
    max-width: 100%;
    backface-visibility: hidden;
    vertical-align: top;
}

.snip1572:before, .snip1572:after {
    content: '';
    background-color: #000;
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    opacity: 0;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.snip1572:before {
    width: 300px;
    height: 2px;
}

.snip1572:after {
    height: 300px;
    width: 2px;
}

.snip1572 figcaption {
    position: absolute;
    left: 0;
    bottom: 0;
}

.snip1572 h3 {
    font-weight: 400;
    padding: 8px 15px;
    margin: 0;
    opacity: 0;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}

.snip1572 a {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
}

.snip1572:hover img, .snip1572.hover img {
    zoom: 1;
    filter: alpha(opacity=25);
    -webkit-opacity: 0.25;
    opacity: 0.25;
}

.snip1572:hover:before, .snip1572.hover:before, .snip1572:hover:after, .snip1572.hover:after {
    opacity: 1;
}

.snip1572:hover:before, .snip1572.hover:before {
    width: 50px;
}

.snip1572:hover:after, .snip1572.hover:after {
    height: 50px;
}

.snip1572:hover h3, .snip1572.hover h3 {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    opacity: 1;
}

figure.snip1158 {
    font-family: 'Raleway', Arial, sans-serif;
    color: #fff;
    position: relative;
    overflow: hidden;
    margin: 10px;
    min-width: 220px;
    max-width: 310px;
    max-height: 220px;
    width: 100%;
    background-color: #000000;
    color: #ffffff;
    text-align: center;
}

figure.snip1158 * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.6s ease;
    transition: all 0.6s ease;
}

figure.snip1158 img {
    opacity: 0.7;
    max-width: 100%;
    object-fit: cover;
    height: 100%;
    width: 100%;
}

figure.snip1158:after {
    background: #000000;
    width: 0;
    height: 6px;
    position: absolute;
    left: 0;
    bottom: 0;
    content: '';
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

figure.snip1158 figcaption {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    padding: 0 30px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

figure.snip1158 h2, figure.snip1158 span {
    margin: 0;
    width: 100%;
}

figure.snip1158 h2 {
    font-weight: 400;
    text-transform: uppercase;
    color: #fff;
}

figure.snip1158 span {
    color: #e6e6e6;
    font-weight: 700;
    text-transform: uppercase;
}

figure.snip1158 a {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    z-index: 1;
}

figure.snip1158.blue:after {
    background-color: #2980b9;
}

figure.snip1158.blue span {
    color: #409ad5;
}

figure.snip1158.red:after {
    background-color: #c0392b;
}

figure.snip1158.red span {
    color: #d65548;
}

figure.snip1158.yellow:after {
    background-color: #f39c12;
}

figure.snip1158.yellow span {
    color: #f5b043;
}

figure.snip1158.green:after {
    background-color: #27ae60;
}

figure.snip1158.green span {
    color: #36d278;
}

figure.snip1158:hover img, figure.snip1158.hover img {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

figure.snip1158:hover:after, figure.snip1158.hover:after {
    width: 100%;
}

.timeline {
    line-height: 1.5em;
    font-size: 14px;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
    position: relative;
    counter-reset: section;
}

.timeline:before {
    content: "";
    width: 10px;
    height: 100%;
    background: #274D7F;
    position: absolute;
    top: 0;
    left: -3.313em;
    border-radius: 40px 40px;
}

.timeline--entry {
    position: relative;
    background-color: #eeeeee;
}

.timeline--entry__title {
    color: white;
    background-color: #FAA339;
    font-weight: 500;
    font-size: 2rem;
    padding: 0.6em 1em;
}

.timeline--entry__title:before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    position: absolute;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    left: -1em;
    border-right: 10px solid #FAA339;
}

.timeline--entry__detail {
    background: rgb(74,174,190);
    background: linear-gradient(90deg, rgba(74,174,190,1) 0%, rgba(39,77,127,1) 100%);
    padding: 1em;
    margin: 0;
    color: #fff;
}

.timeline--entry:before {
    content: "";
    color: #ffffff;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    width: 3em;
    height: 3em;
    background-color: #274D7F;
    border: .2em solid white;
    border-radius: 50%;
    position: absolute;
    counter-increment: section;
    content: counter(section);
    text-shadow: 0 1px 0 #424242;
    left: -4.5em;
}

@supports (display: grid) {
    @media (min-width: 768px) {
        .timeline {
            display: grid;
            grid-gap: 4.75em;
            grid-template-areas: ".  entry1" "entry2  ." ". entry3" "entry4 ." ". entry5";
        }
        .timeline:before {
            left: 49.5%;
        }
        .timeline--entry:nth-child(1) {
            grid-area: entry1;
        }
        .timeline--entry:nth-child(2) {
            grid-area: entry2;
        }
        .timeline--entry:nth-child(3) {
            grid-area: entry3;
        }
        .timeline--entry:nth-child(4) {
            grid-area: entry4;
        }
        .timeline--entry:nth-child(5) {
            grid-area: entry5;
        }
        .timeline--entry:nth-of-type(odd):before {
            left: -3.8em;
        }
        .timeline--entry:nth-of-type(even):not(:nth-of-type(odd)) .timeline--entry__title:before {
            left: 100%;
            border-left: 10px solid #FAA339;
            border-right: 0;
        }
        .timeline--entry:nth-of-type(even):before {
            left: 103%;
        }
    }
}