/* ---------------------------------------------------------------------------
 * Search and filters
 * ---------------------------------------------------------------------------*/
.searchbar {
    border-bottom: 1px solid #EBEBEB;
    border-top: 1px solid #EBEBEB;
}
.searchbar .navbar-form {
    float: left;
    padding-left: 0;
}
.searchbar .filters {
    float: right;
    width: 68%;
}
.searchbar .filters ul {
    margin: 10px 0 10px 0;
}
.searchbar .filters ul li {
    display: inline-block;
}
.searchbar .filters ul li .glyphicon {
    margin-right: 10px;
}
.searchbar .filters ul li a {
    padding: 13px 8px;
    font-size: 2rem;
    color: inherit;
}
.searchbar .filters ul li a:hover {
    text-decoration: none;
}
.searchbar .filters ul li a.activate {
    color: #777777;
}
.searchbar .filters ul li a:hover,
.searchbar .filters ul li a:focus,
.searchbar .filters ul li a.activate,
.searchbar .btn-default:hover {
    background-color: #F8F8F8;
    color: #444444;
    outline: none; /* Remove dotted border. We have a background color so accessibility should be not impacted */
}
.searchbar .filters ul li a:active,
.searchbar .filters ul li a:link {
    text-decoration: none;
}

/* ---------------------------------------------------------------------------
 * Realistations
 * ---------------------------------------------------------------------------*/
.realisations .row {
    margin-top: 50px;
}
.realisation.block,
.realisation.block-odd {
    height: 100%;
}
.realisation.block .text {
    float: left;
}
.realisation.block-odd .text,
.realisation.block ul {
    float: right;
}
.realisation.block ul {
    margin-right: 30px;
}
.realisation .text {
    width: 45%;
}
.realisation .text p {
    color: var(--font-color-secondary);
}
.realisation .link {
    font-size: 16px;
}
.realisation ul {
    height: 290px;
    padding-left: 0;
    width: 440px;
}
.realisation ul li {
    list-style-type: none;
}
.realisation ul a:hover {
    cursor: zoom-in;
}
.realisation ul li img {
    box-shadow: -1px 2px 8px 0px #ccc;
    position: relative;
    width: 100%;
}
.realisation ul li img:hover {
    box-shadow: -1px 2px 12px 0px #ccc;
}
.realisation.block li:nth-child(1) img,
.realisation.block-odd li:nth-child(1) img {
    left: 30px;
    z-index: 2;
}
.realisation.block li:nth-child(2) img,
.realisation.block-odd li:nth-child(2) img {
    top: -289px;
}
.realisation.block li:nth-child(2) img:hover,
.realisation.block-odd li:nth-child(2) img:hover {
    z-index: 3;
}
.realisation.only-images ul   {
    width: auto;
}
.realisation.only-images ul li  {
    float: left;
    margin: 0 30px 0 0;
    width: 427px;
}
.realisation.only-images.block li:nth-child(1) img,
.realisation.only-images.block-odd li:nth-child(1) img {
    left: 0;
    z-index: 1;
}
.realisation.only-images.block li:nth-child(2) img,
.realisation.only-images.block-odd li:nth-child(2) img {
    top: 0;
}
.realisation.only-images.block li:nth-child(2) img:hover,
.realisation.only-images.block-odd li:nth-child(2) img:hover {
    z-index: 1;
}
.realisation.only-texts.block-odd .text,
.realisation.only-texts.block ul {
    float: none;
}
.realisation.only-texts .text {
    width: 100%;
}

@media all and (min-device-width: 481px) and (max-device-width: 1199px) {
    .navbar-form {
        padding-right: 0;
        width: 210px;
    }
    .searchbar .filters {
        width: 70%;
    }
    .searchbar .filters ul {
        padding: 0;
    }
    .searchbar .filters ul li a {
        font-size: 16px;
        padding: 15px 8px 16px 8px;
    }
    .realisation ul {
        width: 45%;
    }
    .realisation .text {
        width: 48%;
    }
    .realisation.block li:nth-child(1) img,
    .realisation.block-odd li:nth-child(1) img {
        top: 50px;
    }
    .realisation.block li:nth-child(2) img,
    .realisation.block-odd li:nth-child(2) img {
        top: -208px;
    }
    .realisation.block .one-element li:nth-child(1) img,
    .realisation.block-odd .one-element li:nth-child(1) img {
        top: 80px;
    }
    .realisation.only-images ul li {
        margin-top: -50px;
    }
    .realisation.only-images ul li, 
    .realisation.only-images ul li img {
        width: 350px;
    }
    .realisation.only-images.block li:nth-child(2) img, 
    .realisation.only-images.block-odd li:nth-child(2) img {
        top: 50px;
    }
    .realisation.only-images.block .one-element,
    .realisation.only-images.block-odd .one-element {
        height: 170px;
    }
    .realisation.only-images.block .one-element li:nth-child(1) img,
    .realisation.only-images.block-odd .one-element li:nth-child(1) img {
        left: 11px;
        top: -15px;
    }
}

@media all and (min-device-width: 480px) and (max-device-width: 991px) {
    .realisation.only-images ul li {
        margin-right: 40px;
    }
    .realisation.only-images ul li, 
    .realisation.only-images ul li img {
        width: 320px;
    }
    .realisation.only-images.block .one-element li:nth-child(1) img, 
    .realisation.only-images.block-odd .one-element li:nth-child(1) img {
        left: 29px;
        top: -30px;
    }
    .realisation.only-images.block .one-element, 
    .realisation.only-images.block-odd .one-element {
        height: 130px;
    }
}

@media all and (min-device-width: 320px) and (max-device-width: 480px) {
    .form-control,
    .navbar-form {
        padding-right: 0;
    }
    .navbar-form {
        margin: auto;
        padding-bottom: 0;
    }
    .navbar-form .btn {
        border-radius: 4px;
    }
    .searchbar .navbar-form {
        float: none;
    }
    .filters .action {
        display: none;
    }
    .searchbar .filters {
        width: 100%;
    }
    .searchbar .filters ul li a {
        margin-right: 30px;
        padding: 10px;
    }
    .searchbar .filters ul li .glyphicon {
        margin-right: 0;
    }
    .realisations {
        font-size: 13.5px;
    }
    
    /* ------------------------------------------------------------------------
     * Realistations
     * -----------------------------------------------------------------------*/
    .realisations .row {
        margin-top: 10px;
    }
    .realisation .link {
        font-size: 12px;
    }
    .realisation.block .text,
    .realisation.block-odd .text{
        float: none;
        width: 100%;
    }
    .realisation ul {
        height: 160px;
        padding-left: 0;
        width: 242px;
    }
    .realisation ul li {
        float: none;
    }
    .realisation.block ul ,
    .realisation.block-odd ul {
        margin-top: 60px;
    }
    .realisation.block .one-element,
    .realisation.block-odd .one-element {
        margin-top: 20px;
    }
    .realisation.block .one-element li:nth-child(1) img,
    .realisation.block-odd .one-element li:nth-child(1) img {
        left: -20px;
    }
    .realisation.block li:nth-child(2) img,
    .realisation.block-odd li:nth-child(2) img {
        top: -193px;
    }
    .realisation.only-images.block .one-element, 
    .realisation.only-images.block-odd .one-element {
        height: 190px;
        margin-top: 0;
    }
    .realisation.only-images.block .one-element li:nth-child(1) img, 
    .realisation.only-images.block-odd .one-element li:nth-child(1) img {
        left: 168px;
    }
    .realisation.only-images ul li {
        margin: 20px 0;
    }
    .realisation.only-images ul li img {
        width: 280px;
    }
    .realisation.only-images.block-odd ul {
        margin-top: 20px;
    }
    
    /* ------------------------------------------------------------------------
     * Footer
     * -----------------------------------------------------------------------*/
    footer {
        padding-top: 100px;
    }
}