﻿/*nok9 red*/
:root {
    --nok9-red: #ea0000;
    /*light gray*/
    --light-gray: #f8f8f8;
    /*medium gray*/
    --medium-gray: #ededed;
}

.linkedin-posts {
    margin: auto;
    max-width: 2000px;
    column-gap: 20px;
    column-count: 4;
    padding-bottom: 100px;
    text-align: center;
}
/* The Masonry Brick */
iframe {
    border: none;
    padding: 10px;
}
/* Masonry on medium-sized screens */
@media only screen and (max-width: 2000px) {
    .linkedin-posts {
        column-count: 3;
        max-width: 1500px;
    }
}
/* Masonry on small screens */
@media only screen and (max-width: 1500px) {
    .linkedin-posts {
        column-count: 2;
        max-width: 1000px;
    }
}
/* Masonry on small screens */
@media only screen and (max-width: 1010px) {
    .linkedin-posts {
        column-count: 1;
        max-width: 500px;
    }

        .linkedin-posts iframe {
            max-width: 90%;
        }
}

.slide-up-fade-in {
    animation: slide-up-fade-in ease 2s;
    animation-iteration-count: 1;
    transform-origin: 50% 50%;
    animation-fill-mode: forwards;
    /*when the spec is finished*/
    -webkit-animation: slide-up-fade-in ease 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation-fill-mode: forwards;
    /*Chrome 16+, Safari 4+*/
    -moz-animation: slide-up-fade-in ease 1s;
    -moz-animation-iteration-count: 1;
    -moz-transform-origin: 50% 50%;
    -moz-animation-fill-mode: forwards;
    /*FF 5+*/
    -o-animation: slide-up-fade-in ease 1s;
    -o-animation-iteration-count: 1;
    -o-transform-origin: 50% 50%;
    -o-animation-fill-mode: forwards;
    /*Not implemented yet*/
    -ms-animation: slide-up-fade-in ease 1s;
    -ms-animation-iteration-count: 1;
    -ms-transform-origin: 50% 50%;
    -ms-animation-fill-mode: forwards;
    /*IE 10+*/
    opacity: 1;
    opacity: 1 \9;
}

@keyframes slide-up-fade-in {
    0% {
        opacity: 0;
        transform: translate(0px, 40px);
    }

    100% {
        opacity: 1;
        transform: translate(0px, 0px);
    }
}

@-moz-keyframes slide-up-fade-in {
    0% {
        opacity: 0;
        -moz-transform: translate(0px, 40px);
    }

    100% {
        opacity: 1;
        -moz-transform: translate(0px, 0px);
    }
}

@-webkit-keyframes slide-up-fade-in {
    0% {
        opacity: 0;
        -webkit-transform: translate(0px, 40px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translate(0px, 0px);
    }
}

@-o-keyframes slide-up-fade-in {
    0% {
        opacity: 0;
        -o-transform: translate(0px, 40px);
    }

    100% {
        opacity: 1;
        -o-transform: translate(0px, 0px);
    }
}

@-ms-keyframes slide-up-fade-in {
    0% {
        opacity: 0;
        -ms-transform: translate(0px, 40px);
    }

    100% {
        opacity: 1;
        -ms-transform: translate(0px, 0px);
    }
}
