/*  
    Style for page: team.php   
*/

/*Added by Celia   */
.cardBack-container ul,
.cardBack-container ol {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}
.cardBack .header .employee-info {
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  overflow: visible !important;
  display: block !important;
  max-height: none !important;
}
/*MARK: -Page General   */
.content-wrapper {
    width: 100%;
    padding-top: 100px;
    color: var(--color-darkGray);
    background-color: #f6f6f6;
    background-image: url("../../assets/img/team/bg.svg");
    background-repeat: no-repeat;
}  
.content-max-width {
    width: 80vw;
    max-width: 1440px;
    margin: 0 auto;
}

/*MARK: -Intro */
.intro-headline2 ul.breadcrumb {
}
.intro-headline2 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}



.intro-headline2 .headline {

    width: 60%;

    height: fit-content;

    font-family: Geeks On The Beach Font Regular, Helvetica, Arial, Lucida, sans-serif;

    color: var(--color-black);

}



.intro-headline2 .headline h1 {

    text-transform: uppercase;

    font-family: Geeks On The Beach Font Regular, Helvetica, Arial, Lucida, sans-serif;

    margin: 100px 0 15px 0;

    line-height: 1.1em;

    font-size: 52px;

    letter-spacing: 1px;

}



.intro-headline2 .headline h2 {

    font-family: Geeks On The Beach Font regular, Helvetica, Arial, Lucida, sans-serif;

    letter-spacing: 2px;

    text-transform: uppercase;

    margin: 0px 0 20px 0;

    font-size: 1.5rem;

}



.intro-headline2 .headline .paragraf1 {

    width: 80%;

    font-size: 1.2rem;

    font-weight: 500;

    line-height: 1.5em;

    margin-top: 25px;

    font-family: Geeks On The Beach Font Regular, Helvetica, Arial, Lucida, sans-serif;

}



.intro-headline2 .intro-img {

    align-self: flex-end;

    width: 45%;

    max-width: 90%;

    margin-top: 0px;

}









/*MARK: -Cards section*/

.cards-section {

    margin-top: 150px;

}



.cards-section h3 {

    text-transform: uppercase;

    font-size: 1.5rem;

    letter-spacing: 2px;

    line-height: 1.4em;

    margin-bottom: 15px;

    color: var(--color-darkGray);

}



.cards-section p {

    font-size: 1.2rem;

    line-height: 1.6;

    color: var(--color-darkGray);

}



.cards-section .rendom-note {

    margin-top: 60px;

}


/* Cards */

body .kt-row-column-wrap .cards-container {
    margin-top: 50px;
    padding-bottom: 100px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 50px;
    column-gap: 2vw;
	-webkit-transform: translate3d(0,0,0);  /* Safari bug */
}

.cards-container .card {
    flex: 0 1 calc(30% - 2px);
    max-width: 400px;
    /* height: 600px  (it is determined using aspect-ratio or js)  */
    aspect-ratio: 4 / 6;
    position: relative;
    cursor: pointer;
    aoverflow: hidden;   /* ! maybe a safari problem */
}

.cards-container .card.last-fake-card {
    pointer-events: none;
}
/* Touch device */
@media (pointer: coarse) {
    .card {
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    }
}

.cardFront,

.cardBack {

    position: absolute;

    width: 100%;

    height: 100%;

    box-shadow: 0px 5px 40px 0px rgba(0,0,0,0.05)!important;

    border: 1px solid rgb(243 243 243);

    border-radius: 7px;

    backface-visibility: hidden;

    -webkit-backface-visibility: hidden;

    aoverflow: hidden;    /* ! maybe a safari problem */

}





/*MARK: ----card contend */

.cardFront {

    display: flex;

    flex-direction: column;

    align-items: center;

    padding: 10% 0;

    abackground: url("../../assets/img/team/pat5.png");

    background-color: #fff;

}



.cardFront .employee-avatar {

    width: 73%;

}



/*MARK: ----card front */

.cardFront .employee-name {

    text-transform: uppercase;

    text-align: center;

    font-size: 1.4rem;

    letter-spacing: 1px;

    line-height: 1.4em;

    margin-bottom: 15px;
    margin: 8% 0 5%;
    pointer-events: none;
    font-family: 'Geeks On The Beach Font Regular', Helvetica, Arial, Lucida, sans-serif;
    font-weight:600;
    color: var(--color-black);
}
.cardFront .employee-position {
    display: block;
    font-size: 1.1rem;
    text-align: center;
    width: 80%;
    border: 0px solid rgb(238, 238, 238);
    background-color: rgb(247, 247, 247);
    padding: 15px 10px;
    border-radius: 8px;
    pointer-events: none;
    color: var(--color-darkGray);
}

/*MARK: ----card back */
.cardBack {
    --card-padding: 7%;
    padding: var(--card-padding);
    abackground: linear-gradient(45deg, rgb(43, 184, 250) 0%, rgb(2, 63, 155) 100%);
    color: #fff;
    font-size: 1.1rem;
    overflow: hidden; 
    /* trying to solve chrome problem blinking */
    transform: translateZ(-3px);
}

/*! Test */
.card:nth-of-type(1) .cardBack {
    background: linear-gradient(45deg, rgb(43, 184, 250) 0%, rgb(2, 63, 155) 100%);
}

.card:nth-of-type(2) .cardBack  {
    background-image:  linear-gradient(147deg, var(--color-MediumBlue), var(--color-LightGreen));
   /* background-image: linear-gradient(-225deg, #22E1FF 0%, #1D8FE1 48%, #625EB1 100%); */
}

.card:nth-of-type(3) .cardBack {
    background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;
}
.card:nth-of-type(4) .cardBack  {
    background-image: linear-gradient(to top, #0BA360 0%, #3CBA92 100%);
}
.card:nth-of-type(5) .cardBack  {
    background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgba(151,10,130,1) 0%, rgba(33,33,33,1) 100.2% );
}
.card:nth-of-type(6) .cardBack  {
    background-image: linear-gradient(-20deg, #6E45E2 0%, #88D3CE 100%);
}
.card:nth-of-type(7) .cardBack  {
    background: linear-gradient(220.55deg, #A531DC 0%, #4300B1 100%);
}
.card:nth-of-type(8) .cardBack  {
    background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgba(0,152,155,1) 0.1%, rgba(0,94,120,1) 94.2% );
}
.card:nth-of-type(9) .cardBack  {
    background: linear-gradient(220.55deg, #FFC328 0%, #E20000 100%);
}
.card:nth-of-type(10) .cardBack  {
    background-image: radial-gradient( circle farthest-corner at 12.3% 19.3%,  rgba(85,88,218,1) 0%, rgba(95,209,249,1) 100.2% );
}
.card:nth-of-type(11) .cardBack  {
        background-image: linear-gradient(42deg, var(--color-HighlightGreen),var(--color-LightGreen),var(--color-MediumGreen), var(--color-DarkGreen));
}
.card:nth-of-type(12) .cardBack  {
    background-image: linear-gradient( 171.8deg,  rgba(5,111,146,1) 13.5%, rgba(6,57,84,1) 78.6% );
}
.card:nth-of-type(13) .cardBack  {
    background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgba(0,52,89,1) 0%, rgba(0,168,232,1) 90% );
}
.card:nth-of-type(14) .cardBack  {
    background-image: linear-gradient( 111.8deg,  rgba(0,104,155,1) 19.8%, rgba(0,173,239,1) 92.1% );
}
.card:nth-of-type(15) .cardBack  {
    background-image: linear-gradient( 109.6deg,  rgba(255,174,0,1) 11.2%, rgba(255,0,0,1) 100.2% );
}
.card:nth-of-type(16) .cardBack  {
    background-image: linear-gradient( 135.9deg,  rgba(109,25,252,1) 16.4%, rgba(125,31,165,1) 56.1% );
}
.card:nth-of-type(17) .cardBack  {
    background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgba(69,86,102,1) 0%, rgba(34,34,34,1) 90% );
}

.cardBack .cardBack-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
}

/* Shine only for Non touch device */
@media (hover: hover) and (pointer: fine) {
    .cardBack .shine {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
        background: linear-gradient(226deg,
                rgba(255, 255, 255, 0.0) 0%,

                rgba(255, 255, 255, 0.0) 15%,

                rgba(255, 255, 255, 0.1) 20%,

                rgba(255, 255, 255, 0.23) 25%,

                rgba(255, 255, 255, 0.1) 30%,

                rgba(255, 255, 255, 0.0) 35%,

                rgba(255, 255, 255, 0) 100%);
        background-size: 100% 300%;
        background-position: 100% 0%;
    }

.cardBack .header {
    overflow: hidden; 
}
.cardBack .header .employee-name {
   text-transform: uppercase;
    font-size: 1.4rem;
    letter-spacing: 1px;
    display: block;
    pointer-events: none;
    font-family: 'Geeks On The Beach Font Regular', Helvetica, Arial, Lucida, sans-serif;
    font-weight:600;
}
.cardBack .header .employee-position {
    display: block;
    margin: 0px 0 12px 0;
     color: rgb(255 255 255 / 72%); 
    /* color: rgb(255, 234, 188);*/
    pointer-events: none;
}
.cardBack .header .employee-info {
    /* to shorten the text in mq, the line number is added */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 11;
    overflow: hidden;
    pointer-events: none;
}
/*MARK: ----charts */
 .cardBack .charts {
    width: calc(100% - (var(--card-padding) * 2));
    width: 100%;
    margin-top: 10px;
    pointer-events: none;
}
.cardBack .charts>span {
    text-transform: uppercase;
    font-size: 1.1rem;
    display: block;
    margin-bottom: -5px;
    color:#fff;
   /* color: rgb(255, 234, 188); */
    letter-spacing: 1px;
    font-family: 'Geeks On The Beach Font Regular', Helvetica, Arial, Lucida, sans-serif;
    font-weight:600;
}
.cardBack .charts .skill-name {
    margin: 2% 0 1% 0;
    display: block;
}
.cardBack .charts .chart-line {
    position: relative;
    width: 100%;
    height: 10px;
    border-radius: 4px;
    background: rgb(255 255 255 / 30%);
    overflow: hidden;
}
.cardBack .charts .chart-line .chart-line-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    /* set in js */
    height: 100%;
    border-radius: 0px 5px 5px 0px;
    will-change: width;
    background: rgb(255 255 255 / 90%);
}
/* ========   Mq   ======== */
/*MARK: -MQ  PAGE */
/*MARK: ---0-576- */

@media only screen and (max-width: 576px) {
    .content-wrapper {
        background-size: 160% !important;
        background-position: 100% 0%;
    }
    /* fixing only for Team  */
    #justified-headline h1 .row:nth-of-type(1) span,
    #justified-headline h1 .row:nth-of-type(2) span {
        line-height: 18vw !important;
    }
    .heading .paragraf-container p {
        font-size: 1rem !important;
    }
    .intro-heading .intro-heading-right {
        margin-top: 0;
    }
    .cards-section h3 {
        font-size: 1.2rem;
    }
    .cards-section p {
        font-size: 1rem;
    }
    .cards-container .card {
        width: unset !important;
        flex: 0 1 100% !important;
    }
    .cardBack {
        font-size: 1rem;
    }
    .cardFront .employee-name,
    .cardBack .header .employee-name {
        font-size: 1.2rem;
    }
    .cardBack .header .employee-info {
        -webkit-line-clamp: 9 !important;
    }
    .cardFront .employee-position {
        font-size: 1rem;
    }
}

/*MARK: ---0-980 */
@media only screen and (max-width: 979px) {
    .content-wrapper {
        background-size: 110%;
        background-position: 100% 0%;
    }
    .intro-heading {
        flex-wrap: wrap;
    }
    /* fixing only for Team  */

    #justified-headline h1 .row:nth-of-type(1) span,

    #justified-headline h1 .row:nth-of-type(2) span {

        line-height: 15vw;

    }



    .intro-heading .intro-heading-left {

        flex: 0 1 100%;

    }



    .intro-heading .intro-heading-right {

        flex: 1 1 100%;

        margin-top: 80px;

    }



    .intro-heading .intro-img-wrapper {

        display: flex;

        justify-content: center;

    }



    .intro-heading .intro-heading-right img {

        width: 80%;

    }



    .heading .paragraf-container p {

        font-size: 1rem;

        line-height: 1.4;

    }



    .cards-section {

        margin-top: 80px;

    }

}





/*MARK: ---0-1100 */

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

    .cards-container {

        row-gap: 60px;

        column-gap: 4vw;

    }

     .intro-headline2 .headline .paragraf1 {

    width: 100%;

    font-size: 1.2rem;

    font-weight: 500;

    line-height: 1.5em;

    margin-top: 25px;

    }

}





/* fixing bugs */

/*MARK: ---fixing bugs */



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



    .cards-container {

        justify-content: center;

        column-gap: 0 !important;

    }



    .cards-container .card {

        flex: 1 1 90%;

    }



    .cards-container .card.last-fake-card {

        display: none;

    }

}



@media only screen and (max-width: 900px) and (min-width:800px) {

    .cardBack .header .employee-info {

        -webkit-line-clamp: 9 !important;

        font-size: 1rem;

    }



    .cardBack {

        font-size: 1rem;

    }

    .cardFront .employee-name,
    .cardBack .header .employee-name {

        font-size: 1.2rem;
    }
    .cardFront .employee-position {
        font-size: 1rem;
    }
}
@media only screen and (max-width: 1201px) and (min-width:800px) {
    .cards-container .card {
        flex: unset;
        width: 45%;
    }
    .cardBack .header .employee-info {
        -webkit-line-clamp: 8;
    }
}

@media only screen and (max-width: 1550px) and (min-width:1200px) {
    .cards-container .card {
        flex: unset;
        width: 31%;
    }
    .cardBack {
        font-size: 1rem;
    }
    .cardFront .employee-name,
    .cardBack .header .employee-name {
        font-size: 1.4rem;
    }
    .cardFront .employee-position {
        font-size: 1rem;
    }
    .cardBack .header .employee-info {
        -webkit-line-clamp: 12;
    }

}