/*
 * partner Placement
 */
.partners {
    position: relative;
    top: 0;
    left: 0;
}

.partner {
    position: absolute;
    width: 25%;
    height: 120px;
}

/* first approximation (old browsers) */
.partner.top           { top: -130px; left:  39%; width: 22%; }
.partner.left-top      { top:  -60px; left:   5%; }
.partner.right-top     { top:  -60px; right:  5%; }
.partner.left-bottom   { top:  105px; left:   5%; }
.partner.right-bottom  { top:  105px; right:  5%; }
.partner.bottom-left   { top:  270px; left:   5%; }
.partner.bottom-right  { top:  270px; right:  5%; }
.partner.bottom-center { top:   45px; left:  39.0%; width: 22%; }

/* perfect placement (html5) */
.partner.left-top, .partner.left-bottom, .partner.right-top, .partner.right-bottom, .partner.bottom-left, .partner.bottom-right {
    width: calc((100% - 320px)/2);
    width: -webkit-calc((100% - 320px)/2);
}
.partner.left-top, .partner.left-bottom, .partner.bottom-left {
    left: calc(0%);
    left: -webkit-calc(0%);
}
.partner.right-top, .partner.right-bottom, .partner.bottom-right {
    right: calc(0%);
    right: -webkit-calc(0%);
}


/*
 * partners
 */
.partner {
    text-align: center;
}

.partner-image {
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
    max-width: 320px;
    max-height: 100px;
}

.partner-image img {
    width: auto;
    max-width: 100%;
    max-height: 100px;
}

.partner-social-media {
    display: block;
    margin: 0 auto;
    margin-top: 10px;
    text-align: center;
}

.partner-email,
.partner-twitter,
.partner-facebook,
.partner-instagram,
.partner-linkedin,
.partner-website {
    display: inline-block;
    width: 16px;
    height: 16px;
    text-indent: -99999px;
    text-decoration: none;
    background-repeat: no-repeat;
}

.partner-responsive {
    display: none;
}

.partner-email { background-image: url(/static/images/login/partners/email.svg); }
.partner-twitter { background-image: url(/static/images/login/partners/twitter.svg); }
.partner-facebook { background-image: url(/static/images/login/partners/facebook.svg); }
.partner-instagram { background-image: url(/static/images/login/partners/instagram.svg); }
.partner-linkedin { background-image: url(/static/images/login/partners/linkedin.svg); }
.partner-website { background-image: url(/static/images/login/partners/web.svg); }

.partner-syw {
    display: block;
    padding-top: 50px;
}

.partner-syw img {
    margin: 0 auto;
    height: 50px;
    display: block;
}

/*
*   Random partners
*/
.all-random-partners .random-partner {
    vertical-align: top;
    position: relative;
}

.all-random-partners .partner-social-media {
    margin: 0;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: -1px;
    height: 100px;
    background-color: #fff;
}

.all-random-partners .partner-social-media a {
    width: 64px;
    margin: 8px 0;
    cursor: pointer;
    height: 100%;
    margin: 0;
    background-position: center;
}

.random-partner img {
}


.random-partners {
    text-align: center;
    margin: 0 50px;
}

.random-partner {
    display: block;
    float: left;
    width: 100%;
    height: 180px;
}

.partners_lt4 {
    margin-top: 20px;
}

@media all and (min-width: 0px) and (max-width: 1000px) {
    .partners, .random-partners {
        height: auto;
    }

}

@media all and (min-width: 0px) and (max-width: 600px) {
    .partners {
        height: 80px;
    }

    .partner {
        width: 80px !important;
        height: 40px !important;
    }
}

/**
 * new partner flipping for the login screen
 */
.new-partners {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.new-partner {
    width: 400px;
    height: 200px;
    background-color: transparent;
    perspective: none;
    position: relative;
    margin: 20px;
}

.new-partner .new-front,
.new-partner .new-back {
    -webkit-backface-visibility: hidden; /* safari */
    backface-visibility: hidden;
    transition: transform 0.5s ease-in;
    position: absolute;
    width: 100%;
    height: 100%;
}

.new-partner .new-front {
    transform: rotateY(0deg);
}

.new-partner .new-back {
    transform: rotateY(-180deg);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}

.new-partner:hover > .new-front {
    transform: rotateY(180deg);
}
.new-partner:hover > .new-back {
    transform: rotateY(0deg);
}


.new-partner .new-back a {
    width: 44px;
    height: 44px;
    cursor: pointer;
    user-select: none;
    background-size: 40px;
    margin: 0 4px;
}