.og-grid {
    list-style: none;
    padding:    20px 0;
    margin:     0 auto;
    text-align: center;
    width:      100%;
}

.og-grid li {
    display:        inline-block;
    margin:         10px 5px 0 5px;
    vertical-align: top;
    height:         250px;
}

.og-grid li > a,
.og-grid li > a img {
    border:   none;
    outline:  none;
    display:  block;
    position: relative;
}

.og-grid li.og-expanded > a::after {
    bottom:              -40px;
    border:              solid transparent;
    content:             " ";
    height:              0;
    width:               0;
    position:            absolute;
    pointer-events:      none;
    border-bottom-color: #BFBFBF;
    border-width:        15px;
    left:                50%;
    margin:              -20px 0 0 -15px;
}

.og-expander {
    position:   absolute;
    background: #FFF;
    border:     1px solid #BFBFBF;
    top:        auto;
    left:       0;
    width:      100%;
    margin-top: 40px;
    text-align: left;
    height:     0;
    overflow:   hidden;
    height:     378px ! important;
    z-index: 2000;
}

.og-expander-inner {
    padding: 50px 30px;
    height:  100%;
}

.og-close {
    position: absolute;
    width:    40px;
    height:   40px;
    top:      20px;
    right:    20px;
    cursor:   pointer;
}

.og-close::before,
.og-close::after {
    content:           '';
    position:          absolute;
    width:             100%;
    top:               50%;
    height:            1px;
    background:        #888;
    -webkit-transform: rotate(45deg);
    -moz-transform:    rotate(45deg);
    transform:         rotate(45deg);
}

.og-close::after {
    -webkit-transform: rotate(-45deg);
    -moz-transform:    rotate(-45deg);
    transform:         rotate(-45deg);
}

.og-close:hover::before,
.og-close:hover::after {
    background: #333;
}

.og-fullimg,
.og-details {
    width:    30%;
    float:    left;
    height:   100%;
    overflow: hidden;
    position: relative;
}

.og-details {
    padding: 0 40px 0 20px;
    width:   60%;
}

.og-fullimg {
    text-align: center;
}

.og-fullimg img {
    display:    inline-block;
    max-height: 100%;
    max-width:  100%;
}

.og-details h3 {
    font-weight:   300;
    padding:       0 0 10px;
    margin-bottom: 10px;
}

.og-details p {
    font-weight: 400;
    font-size:   16px;
    line-height: 22px;
    color:       #999;
}

.og-details a {
    background:     #009FE4;
    color:          #FFF;
    text-transform: uppercase;
    padding:        10px 15px;
    width:          auto !important;
    margin:         10px 0;
    display:        inline-block;
}

.og-details a:hover {
    background: #024762;
}

.og-loading {
    width:             20px;
    height:            20px;
    border-radius:     50%;
    background:        #DDD;
    box-shadow:        0 0 1px #CCC, 15px 30px 1px #CCC, -15px 30px 1px #CCC;
    position:          absolute;
    top:               50%;
    left:              50%;
    margin:            -25px 0 0 -25px;
    -webkit-animation: loader 0.5s infinite ease-in-out both;
    -moz-animation:    loader 0.5s infinite ease-in-out both;
    animation:         loader 0.5s infinite ease-in-out both;
}

@-webkit-keyframes loader {
    0% {
        background: #DDD;
    }
    33% {
        background: #CCC;
        box-shadow: 0 0 1px #CCC, 15px 30px 1px #CCC, -15px 30px 1px #DDD;
    }
    66% {
        background: #CCC;
        box-shadow: 0 0 1px #CCC, 15px 30px 1px #DDD, -15px 30px 1px #CCC;
    }
}

@-moz-keyframes loader {
    0% {
        background: #DDD;
    }
    33% {
        background: #CCC;
        box-shadow: 0 0 1px #CCC, 15px 30px 1px #CCC, -15px 30px 1px #DDD;
    }
    66% {
        background: #CCC;
        box-shadow: 0 0 1px #CCC, 15px 30px 1px #DDD, -15px 30px 1px #CCC;
    }
}

@keyframes loader {
    0% {
        background: #DDD;
    }
    33% {
        background: #CCC;
        box-shadow: 0 0 1px #CCC, 15px 30px 1px #CCC, -15px 30px 1px #DDD;
    }
    66% {
        background: #CCC;
        box-shadow: 0 0 1px #CCC, 15px 30px 1px #DDD, -15px 30px 1px #CCC;
    }
}

@media screen and (max-width: 830px) {

    .og-expander h3 {
        font-size:   32px;
        line-height: 40px
    }

    .og-expander p {
        font-size: 13px;
    }

    .og-expander a {
        font-size: 12px;
    }

}

@media screen and (max-width: 650px) {

    .og-fullimg {
        display: none;
    }

    .og-details {
        float: none;
        width: 100%;
    }

}

@media screen and (max-width: 480px) {
    .og-expander .og-expander-inner {
        box-sizing: border-box;
        padding:   20px;
    }

    .og-expander {
        height:   auto !important;
        position: relative;
    }

    .solution-produit.og-expanded {
        height: auto !important;
    }

    .og-details {
        box-sizing: border-box;
    }

    .og-close {
        position: relative;
        width:    40px;
        height:   40px;
        top:      0;
        right:    0;
        cursor:   pointer;
        display:  block;
        margin:   0 0 0 auto;
		z-index: 500;
    }

}