// sponsors page
.sponsor-items {
    h2 {
        margin-top: 20px;
        margin-bottom: 0;
        border-bottom: 1px solid #aaa;
    }
    .sponsor-grid {
        margin: 0 0 60px;
        * {
            @include box-sizing(border-box);
        }
        display: block;
        width: 100%;
        padding: 0;
        .sponsor-item {
            // border: 1px solid #eee;
            height: 170px;
            width: 25%;
            display: block;
            float: left;
            padding: 10px;
            position: relative;
            // border-top: 1px solid #dddddd;
            // border-right: 1px solid #dddddd;
            // &:nth-child(1),
            // &:nth-child(2),
            // &:nth-child(3),
            // &:nth-child(4) {
            //     border-top: 0;
            // }
            // &:nth-child(4n) {
            //     border-right: 0;
            // }
            a {
                display: block;
                position: relative;
                height: 100%;
                width: 100%;
                border: 1px solid transparent;
                @include transition(all linear 0.1s);
                &:hover {
                    border: 1px solid #ddd;
                    // img {
                    //     opacity: .7;
                    // }
                }
            }
            img {
                width: auto;
                height: auto;
                max-width: 100%;
                max-height: 100%;
                display: block;
                position: absolute;
                left: 50%;
                top: 50%;
                -webkit-transform: translate(-50%, -50%);
                -moz-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                -o-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
            }
        }
    }
}
@media all and (max-width: 980px) and (min-width: 768px) {
    .sponsor-items {
        .sponsor-grid {
            .sponsor-item {
                width: 50%;
                // &:nth-child(3),
                // &:nth-child(4) {
                //     border-top: 1px solid #dddddd;
                // }
                // &:nth-child(2n) {
                //     border-right: 0;
                // }
            }
        }
    }
}
@media all and (max-width: 767px) {
    .sponsor-items {
        .sponsor-grid {
            .sponsor-item {
                img {
                    max-width: 90%;
                }
            }
        }
    }
}
@media all and (max-width: 580px) {
    .sponsor-items {
        .sponsor-grid {
            .sponsor-item {
                width: 50%;
                // &:nth-child(3),
                // &:nth-child(4) {
                //     border-top: 1px solid #dddddd;
                // }
                // &:nth-child(2n) {
                //     border-right: 0;
                // }
            }
        }
    }
}


// sponsors home
.home-sponsor-items {
    margin: 20px auto 40px;
    .home-sponsors-grid {
        * {
            @include box-sizing(border-box);
        }
        display: block;
        width: 100%;
        padding: 0;
        margin: 0;
        .home-sponsor-item {
            height: 160px;
            width: 16.6%;
            display: block;
            float: left;
            padding: 10px;
            position: relative;
        }
        a {
            display: block;
            position: relative;
            height: 100%;
            width: 100%;

        }
        img.visible-on-hover {
            opacity: 0;
            z-index: 5;
            @include transition(all .2s);
        }
        .home-sponsor-item:hover {
            img.visible-on-hover {
                opacity: 1;
            }
        }
        img {
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 100%;
            display: block;
            position: absolute;
            left: 50%;
            top: 50%;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }
    }
}

@media all and (max-width: 980px) {
    .home-sponsor-items {
        .home-sponsors-grid {
            .home-sponsor-item {
                width: 25%;
            }
        }
    }
}
@media all and (max-width: 767px) {
    .home-sponsor-items {
        .home-sponsors-grid {
            .home-sponsor-item {
                width: 33.3%;
            }
        }
    }
}
@media all and (max-width: 540px) {
    .home-sponsor-items {
        .home-sponsors-grid {
            .home-sponsor-item {
                width: 50%;
            }
        }
    }
}
@media all and (max-width: 380px) {
    .home-sponsor-items {
        .home-sponsors-grid {
            .home-sponsor-item {
                width: 100%;
            }
        }
    }
}