:root {
    --react-color: #00d8ff;
    --vue-color: #42b883;
    --angular-color: #b52e31;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.ext-partners{
    text-align: center;
    background: #cbcbd9;
}
.ext-partners a img{
    width: 100px!important;
    height: 100px!important;
    border-radius: 50px!important;
    margin-top: 20px!important;
    display: inherit!important;
}


.partner-list {
    height: 39vh;
    display: grid;
    place-items: center;
    background: #cbcbd9;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.partner-list .card-in {
    /*width: 350px;*/
    /*height: 115px;*/
    /*width: 330px;*/
    width: 29rem;
    height: 65px;
    background: #fff;
    position: relative;
    overflow-x: hidden;
    overflow-y: hidden;
    z-index: 10;
}

.skewed {
    position: absolute;
    width: 100px;
    height: 100%;
    background-color: rgba(46, 139, 86, 0.616);
    transform: skewX(25deg) translateX(-30px) scaleX(1);
    transform-origin: left;
}

.partner-list .card-area {
    position: relative;
    /*margin: 1px 10px;*/
    position: relative;
    margin: 5px 10px;
}

.partner-list .card-area:hover .skewed {
    transform: skewX(25deg) translateX(-30px) scaleX(1);
}

.partner-list .card-area:hover {
    transform: skewX(5deg) translateX(-10px) scaleX(1);
}

.partner-list .avatar {
    /*width: 100px;*/
    width: 51px!important;
    height: 51px!important;
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    z-index: 10;
    /*left: 15px;*/
    left: 10px;
    top: 20%;
    transform: translateY(-50%);
}

.media {
    display: none;
    position: absolute;
    width: 80%;
    height: 45px;
    background: #bbb;
    left: 50%;
    transform: translateX(-50%) translateY(-45px);
    transition: transform 250ms ease-out;
    display: grid;
    place-items: center;
    z-index: 5;
}

.partner-list .list {
    display: flex;
    list-style-type: none;
}

.partner-list item {
    margin: 0 1rem;
}

.partner-list .link {
    font-size: 1.5rem;
    color: #fff;
}

.partner-list .card-area:hover .media {
    /*transform: translateX(-50%) translateY(0);*/
}

.partner-list .content {
    margin-top: 0.4rem;
    margin-left: 9rem;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.partner-list .content h1,
h6 {
    font-weight: 100;
}

.partner-list .content h1 {
    font-size: 1.8rem!important;
}

.partner-list .content h6 {
    font-size: 1rem;
}

.partner-list .esp {
    font-size: 1.15rem;
}

.partner-list .bg-react {
    background: var(--react-color);
}

.partner-list .bg-vue {
    background: var(--vue-color);
}

.partner-list .bg-angular {
    background: var(--angular-color);
}

.partner-list .text-react {
    color: var(--react-color);
}

.partner-list .text-vue {
    color: var(--vue-color);
}

.partner-list .text-angular {
    color: var(--angular-color);
}

.partner-list .color-white {
    color: #fff;
}

.active-partner {
    transform: perspective(1000px) rotateY(0deg) scale(1);
}

.active-partner-slide {
    position: absolute;
    background:#01BAF2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 50px;
    border: 5px solid #262626;
    box-sizing: border-box;
    transform: perspective(1000px) rotateY(90deg) scale(0);
    transition: .5s;
}

/*MAGNIFIC POPUP WINDOW START  */
.mfp-newspaper .mfp-with-anim {
    opacity: 0;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.5s;
    transform: scale(0) rotate(275deg);
}
.mfp-newspaper.mfp-bg {
    opacity: 0;
    transition: all 0.5s;
}
.mfp-newspaper.mfp-ready .mfp-with-anim {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}
.mfp-newspaper.mfp-ready.mfp-bg {
    opacity: 0.8;
}
.mfp-newspaper.mfp-removing .mfp-with-anim {
    transform: scale(0) rotate(275deg);
    opacity: 0;
}
.mfp-newspaper.mfp-removing.mfp-bg {
    opacity: 0;
}


/* Zoom effect */
.mfp-zoom-in .mfp-with-anim {
    opacity: 0;
    transition: all 0.2s ease-in-out;
    transform: perspective(1000px) rotateY(0deg) scale(0.2);
    /*transform: scale(0.2);*/
}
.mfp-zoom-in.mfp-bg {
    opacity: 0;
    transition: all 1s ease-out;
}
.mfp-zoom-in.mfp-ready .mfp-with-anim {
    opacity: 1;
    transform: perspective(1000px) rotateY(0deg) scale(1);
    /*transform: scale(1);*/
}
.mfp-zoom-in.mfp-ready.mfp-bg {
    opacity: 0.8;
}
.mfp-zoom-in.mfp-removing .mfp-with-anim {
    transform: scale(0.8);
    opacity: 0;
}
.mfp-zoom-in.mfp-removing.mfp-bg {
    opacity: 0;
}







/*MAGNIFIC POPUP WINDOW  END*/