/* Body behavior 
------------------------------------------------------------------------------------------------------------------------ */





/* SECTIONS 
------------------------------------------------------------------------------------------------------------------------ */

.sectionContainer{
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    align-items: center;
   margin-left:40px;
    margin-right:40px;
    margin-top:0px; 
}


@media only screen and (max-width: 500px){
.sectionContainer{margin-left:15px; margin-right:15px; margin-bottom: 15vh;}
}


.footerContainer{
    position: relative;
 display: flex;
    width: 100%;
    height: 150px;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    
    background-color: #e5e5e5; 
    margin-top: auto;
}

@media only screen and (max-width: 500px){
.footerContainer{margin-top: -10px;}
}



/* COMMON CONTAINERS 
------------------------------------------------------------------------------------------------------------------------ */


.cont_flx{
    display: flex;
    width: 100%;
    /*background-color: #0AD; /*Bleu*/
    flex-direction: row;
    flex-wrap: nowrap;
    height: auto;
}


.elem-flx{
    flex-grow: 1;
    flex-direction: row;
    flex-wrap: nowrap;
    background-color: transparent;
    padding: 0px 0px;
    text-align: left;
    
    margin: 0px;
    height:auto;
}


.fb70_1{flex-basis: 70%; padding-top: 24px;}
.fb70_3{flex-basis: 75%; padding-top: 58px;}
.fb70_4{flex-basis: 70%; margin-top: 85px;}
.fb70_5{flex-basis: 70%; margin-top: 76px;}
.fs3{flex-shrink: 1;}


.cta_container{
    display:inline-flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-start;
    width: 35%;
    height: auto;
    background-color: transparent;
}


.descrp{
    margin-bottom: -15px;
}

.title_monog_cont{
    display: inline-flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;  
    height: 53px;
    width: auto;
    margin-top: 10px;
    margin-bottom: 7px;
    background-color: transparent;
}


@media only screen and (max-width: 500px){
.cta_container{background-color: transparent}
}

@media only screen and (max-width: 500px){
.fb70_1, .fb70_3, .fb70_4, .fb70_5{
    flex-basis: 100%;}
}





/* GET TO KNOW US 
------------------------------------------------------------------------------------------------------------------------ */


/* CTA @Get to know us  */


.cta1_home {
    position: relative;
    display:flex;
    justify-content: flex-end;
    cursor: pointer;
    background: transparent;
    height:336px;
    width: 286px;
    top: 20%;
    overflow: hidden;
}

.cta1_home .arc {
    width: 334px;
    right:-17.5%;
}
.cta1_home .btn1{
    position: relative;
    display:inline-flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    flex-basis: auto;
    flex-grow: 0;
    flex-shrink: 0;
    cursor: pointer;
    
    height: 85px;
    background: transparent;
}

.btn1 .arrowL {
    width: 85px;
    height: 85px;
    background-color: black;
    
    transition: background-color 5s ease;
    transition: all 0.4s ease-out;
    }

.btn1 .txt {
    position: relative;  
    right: -12%;
    color: transparent;
}

.cta1_home:hover .arc {
border: 1px solid #000000;
    border-top-color: 100%;
  border-left-color: transparent;
    transition: all 0.4s ease-in-out;
}

.cta1_home:hover .arrowL {
 background: #DE0066;
    position: relative;
    transform: translate3d(-10.7rem, 0, 0);
   -webkit-clip-path: polygon(
        62% 13%, 62% 16%, 97% 50%, 97% 49%, 97% 50%, 97% 50%, 62% 83%, 62% 86%, 100% 50% );
       clip-path: polygon(
        62% 13%, 62% 16%, 97% 50%, 97% 49%, 97% 50%, 97% 50%, 62% 83%, 62% 86%, 100% 50%  );
    transition: all 0.3s ease-out;
}

.cta1_home:hover .txt {
    color: black;
    transition: all 0.4s ease-in-out;
    }




/* MEMBERS 
------------------------------------------------------------------------------------------------------------------------ */

/* IMAGES GRID */

.mbrs_container{
    
    z-index: 1;
    position: relative;
    
    width: 85%;
    max-width: 85%;
    height: auto;
    
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: center;
    margin-top: -8vw;
    
    /* background-color: #dfeaff; */
}


.mbrs_col1 {
    
    width: 67%;
    height: 100%;
    display: flex;
    flex-grow: 2;
    flex-flow: column wrap;
    justify-content: flex-start;
    margin-right:  2.5%;
    /*background-color: #ffd800;*/
}


.mbrs_bigimg {
  background: transparent;

  display: block;
  height: 0;
  overflow: hidden;
  padding-top: 63%;
  position: relative;
  width: 100%;
  
}

.mbrs_bigimg::after {
  border-radius: inherit;
  
  content: "";
  height: 45%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}



.mbrs_col2{
    
    width: 32%;
    margin: 0px;
    display: flex;
    flex-grow: 1;
    flex-flow: column nowrap;
    align-content: flex-end;
    justify-content: space-between;
    
    /*background-color: aqua;*/    
}



.mbrs_img {
  background: transparent;

  display: block;
  height: 0;
  overflow: hidden;
  padding-top: 61.5%;
  position: relative;
  width: 100%;
  
}

.mbrs::after {
  border-radius: inherit;
  
  content: "";
  height: 45%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}



.caption_container{
    width: 85%;
    max-width: 85%;
    height: 30px;
    
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    text-align: center;
    margin-top: -3px;
}

@media only screen and (max-width: 500px){
    
.mbrs_container{width: 100%;  max-width: 100%;  height: auto;  align-items: flex-start;  justify-items: flex-start; flex-direction: column; flex-wrap: nowrap;   margin-top:-10px;}
    
.mbrs_col1 {  width: 100%; height: 33vh; display: flex; flex: 1 0 auto; margin-bottom: 25px; margin-right:  0px; border: 0;}   
    
.mbrs_col2 {width: 100%; display: flex;  flex: 1 0 auto; justify-content: flex-start;}  
    
.mbrs_img{ width: 100%;  margin-bottom: 13px; }

.caption_container{ margin-top: -15px; }

}


/* WHAT WE DO 
------------------------------------------------------------------------------------------------------------------------ */

.spacer {
    height: 20px;
}

.what_cont_flx{
    
    width: 100%;
    height: auto;
    
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    
    margin-top: -10px;
}


.what_col1_flx{
    
    width: auto;
    height:auto; 
    
    display: flex; 
    flex-flow: row wrap;
    flex-grow: 1;
    flex-basis: 40%;
    align-content: center;
    
    padding: 0;
    /* background-color: #ebaf5f; */
}

.what_col2_flx{
    
    width: auto;
    
    display: flex; 
    flex-flow: column nowrap; 
    flex-basis: 60%;
    flex-grow: 2;
    justify-content: center;
    
    padding-left: 3%; 
    padding-right: 3%; 
    /* background-color: azure; */
}

.what_title_cont{
    
    width: auto;
    height: auto;
    
    display:flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    
    /*background-color: #9cffe8; */
}


.whatslide_container{
    
    width: 100%;
    height: auto;
    
    z-index: 1;
    position: relative;
    display: flex;
    flex-direction: row;
    align-self: flex-end;
    justify-content: flex-end;
    align-content: stretch;
    flex: 1 0 auto;
    margin-left: 8%;
    margin-top: -25%;
    /*background-color: #dfeaff; */
}

.circle_img {
  background: transparent;
  border-radius: 50%;
  display: block;
  height: 0;
  overflow: hidden;
  padding-top: 84%;
  position: relative;
  width: 84%;
}

.circle_img::after {
  border-radius: inherit;
  
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}


.what_title {
    position: relative;
    display:flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    
    background: transparent;
    margin-top:0px;
    margin-bottom:0px;
    height:336px;
    width: 286px;
}

.what_title .arc {
    width: 334px;
    top: 0;
    left:-17.5%; 
}

.what_title .Tcat {
    position: relative;  
    left: -8%;
    top:1%;
}


  
/* CTA @What we do */

.cta2_home {
    width:180px;
    height: 61px;
    display:flex;
    flex-basis: auto;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
    background-color: transparent;
    
}


.cta2_home .arrowL {
    position: relative;
width: 85px;
   
   background: #FFF;
    transition: background-color 5s ease;
  background-color: black;
    transition: all 0.4s ease-in-out;
    }


.cta2_home .txt {
    position: relative;
    width: 150px;
    
    color: transparent;
    margin-left: -40px;
    transition: all 0.2s ease-in-out;
    background-color: transparent;
    }


.cta2_home:hover .arrowL {
 background: #DE0066;
    position: relative;
    transform: translate3d(-3.3rem, 0, 0);
   -webkit-clip-path: polygon(
        62% 13%, 62% 16%, 97% 50%, 97% 49%, 97% 50%, 97% 50%, 62% 83%, 62% 86%, 100% 50% );
       clip-path: polygon(
        62% 13%, 62% 16%, 97% 50%, 97% 49%, 97% 50%, 97% 50%, 62% 83%, 62% 86%, 100% 50%  );
    transition: all 0.2s ease-out;
}

.cta2_home:hover .txt {
    color: black;
    transform: translate3d(0.5rem, 0, 0);
    transition: all 0.4s ease-in-out;
    }




@media only screen and (max-width: 500px){
       
.what_cont_flx{flex-direction: column; margin-bottom: -8vh}
.what_col1_flx{align-content: flex-start;}
.what_col2_flx{flex-basis: 100%; flex-grow: 1; justify-content: flex-start; padding-left: 2%;  padding-right: 2%; margin-top: 30px;}
.whatslide_container{margin-top: -35%;  }
.circle_img{padding-top: 70%; width:70%; }
}





/* CALENDAR  
------------------------------------------------------------------------------------------------------------------------ */

/* IMAGES */

.cal_container{

    width: 100%;
    max-width: 100%;   
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: space-between; 
    margin-top: 1vw;
    
    /*background-color: #dfeaff; */
}


.cal_box{
    display: flex;
    flex-direction: column;
    width: 31.5%;

    flex-wrap: nowrap;
    flex: 0 0 auto;
    
    /* background-color: #719ae8; */
}


.cal_img {
  background: transparent;

  display: block;
  height: 0;
  overflow: hidden;
  padding-top: 64%;
  position: relative;
  width: 100%;
    
    margin-top: 15px;
    margin-bottom: 15px;
}

.cal_img::after {
  border-radius: inherit;
  
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}


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

.cal_container{ width: 100%;  max-width: 100%; align-items: flex-start; flex-direction: column; flex-wrap: wrap; }
.cal_box{  width: 100%;  flex: 1 0 auto; margin-top: 30px;}
}




/* CTA @Calendar */


.cta3_home {
    position: relative;
    display:flex;
    justify-content: flex-end;
    cursor: pointer;
    background: transparent;
    overflow: hidden;
    height:268px;
    width: 228px;
    top: 50%;
}


.cta3_home .arc {
    width: 266px;
    height: 266px;
    right:-17.5%;  
}

.cta3_home .btn3{
    position: relative;
    display:inline-flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    flex-basis: auto;
    flex-grow: 0;
    flex-shrink: 0;
    cursor: pointer;
    
    height: 85px;
    background: transparent;
}


.btn3 .arrowL {
    width: 85px;
    height: 85px;
    background-color: black;
    
    transition: background-color 5s ease;
    transition: all 0.4s ease-out;
    }

.btn3 .txt {
    position: relative;  
    right: -26%;
    color: transparent;
    }

.cta3_home:hover .arc {
border: 1px solid #000000;
    border-top-color: 100%;
  border-left-color: transparent;
    transition: all 0.4s ease-in-out;
}

.cta3_home:hover .arrowL {
 background: #DE0066;
    position: relative;
    transform: translate3d(-8.5rem, 0, 0);
   -webkit-clip-path: polygon(
        62% 13%, 62% 16%, 97% 50%, 97% 49%, 97% 50%, 97% 50%, 62% 83%, 62% 86%, 100% 50% );
       clip-path: polygon(
        62% 13%, 62% 16%, 97% 50%, 97% 49%, 97% 50%, 97% 50%, 62% 83%, 62% 86%, 100% 50%  );
    transition: all 0.3s ease-out;
}

.cta3_home:hover .txt {
    color: black;
    transition: all 0.4s ease-in-out;
    }














/* CUSTOM SHAPES  
------------------------------------------------------------------------------------------------------------------------ */

.arc {
    position: absolute;
  /* Border size and color */
  border: 1px solid #DE0066;
  /* Creates a circle */
  border-radius: 50%;
  /* Circle size */
  height: 334px;
  width: 334px;
  /* Use transparent borders to define opening (more transparent = larger opening) */
  border-top-color: 50%;
  border-left-color: transparent;
  /* Use transform to rotate to adjust where opening appears */
  transform: rotate(180deg)
}



.arrowL {
    display: block;
    z-index: 1;
    width: 85px;
    height: 85px;
    background: black;
 clip-path: polygon(
        62% 13%, 62% 16%, 96% 49%, 0% 49%, 0% 51%, 96% 51%, 62% 83%, 62% 86%, 100% 50%
      );  
-webkit-clip-path: polygon(
        62% 13%, 62% 16%, 96% 49%, 0% 49%, 0% 51%, 96% 51%, 62% 83%, 62% 86%, 100% 50%
      );
}


.arrowM {
width: 85px;
height: 85px;
background: black;
 clip-path: polygon(
        61% 13%, 61% 17%, 94% 48%, 0% 48%, 0% 51%, 93% 51%, 61% 83%, 61% 87%, 99% 49%
      );  
 -webkit-clip-path: polygon(
        61% 13%, 61% 17%, 94% 48%, 0% 48%, 0% 51%, 93% 51%, 61% 83%, 61% 87%, 99% 49%
      );      
}



.arrowS {
width: 26px;
height: 26px;
background: black;
clip-path: polygon(
        55% 13%, 55% 21%, 84% 47%, 0% 47%, 0% 53%, 84% 53%, 55% 79%, 55% 86%, 95% 50%, 95% 50%
      );
-webkit-clip-path: polygon(
        55% 13%, 55% 21%, 84% 47%, 0% 47%, 0% 53%, 84% 53%, 55% 79%, 55% 86%, 95% 50%, 95% 50%
      );       
}

.arrowS2 {
width: 26px;
height: 26px;
background: black;
-webkit-clip-path: polygon(
        35% 0%, 35% 9%, 70% 51%, 65% 47%, 69% 50%, 67% 53%, 35% 91%, 35% 100%, 78% 50%, 78% 50%);
       clip-path: polygon(
        35% 0%, 35% 9%, 70% 51%, 65% 47%, 69% 50%, 67% 53%, 35% 91%, 35% 100%, 78% 50%, 78% 50%);      
}


.cross{
width: 60px;
height: 60px;
background: black;
   -webkit-clip-path: polygon(
        15% 48%, 48% 48%, 48% 15%, 51% 15%, 51% 48%, 85% 48%, 85% 51%, 51% 51%, 51% 85%, 48% 85%, 48% 51%, 15% 51%
      );
        
        clip-path: polygon(
        15% 48%, 48% 48%, 48% 15%, 51% 15%, 51% 48%, 85% 48%, 85% 51%, 51% 51%, 51% 85%, 48% 85%, 48% 51%, 15% 51%
      );
}



.ie678910 .arrow { /* Pour IE6, IE7 et IE8 */  
  /* ajouter  url ima ??? */
}



/* OVERIDE TXT CTA  
------------------------------------------------------------------------------------------------------------------------ */

*
.txt{
  font-family: 'Spezia', helvetica, arial, sans-serif;
    font-weight: 400;
	font-style: normal;
    font-size: 22px;
    line-height: 24px;
    text-decoration: none;
    white-space: nowrap;  
}




/* CTA @Web Library  
------------------------------------------------------------------------------------------------------------------------ */

.cta_weblib {
position: relative;
    display:flex;
    justify-content: flex-end;
    cursor: pointer;
    overflow: hidden;
    background: transparent;
    height:217px;
    width: 185px;
    top: 51%;  
}

.cta_weblib .arc {
    width: 215px;
    height: 215px;
    right:-17.5%;
}

.cta_weblib .btnlib{
    position: relative;
    display:inline-flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    flex-basis: auto;
    flex-grow: 0;
    flex-shrink: 0;
    cursor: pointer;
    
    height: 65px;
    background: transparent;
}

.btnlib .arrowM {
    width: 65px;
    height: 65px;
    background-color: black;
    
    transition: background-color 5s ease;
    transition: all 0.3s ease-out;
    }

.btnlib .txt{
    position: relative;  
    right: -18%;
    color: transparent;

    font-family: 'Spezia', helvetica, arial, sans-serif;
    font-weight: 400;
	font-style: normal;
    font-size: 18px;
    line-height: 18px;
    text-decoration: none;
    color: transparent;
    white-space: nowrap;
    }

.cta_weblib:hover .arc {
border: 1px solid #000000;
    border-top-color: 100%;
  border-left-color: transparent;
    transition: all 0.4s ease-in-out;
}

.cta_weblib:hover .arrowM {
    
 background: #DE0066;
    position: relative;
    transform: translate3d(-6.3rem, 0, 0);
   -webkit-clip-path: polygon(
        61% 13%, 61% 17%, 94% 48%, 95% 48%, 93% 51%, 93% 51%, 61% 83%, 61% 87%, 99% 49% );
       clip-path: polygon(
       61% 13%, 61% 17%, 94% 48%, 95% 48%, 93% 51%, 93% 51%, 61% 83%, 61% 87%, 99% 49% );
    transition: all 0.2s ease-out;
}

.cta_weblib:hover .txt {
    color: black;
    transition: all 0.4s ease-in-out;
    }






/* Regular buttons  
------------------------------------------------------------------------------------------------------------------------ */

.ctn_but{
    display: flex;
    flex-direction: column;
    width:100%;
    margin-top:10px;
    margin-bottom:10px;
}

.regbtn {
    display: inline-flex;
    align-items: center;
    border: 1px solid #000000;
    padding: 0px 28px 0px 28px;
    height:53px;
    border-radius: 50px;
    background-color: #FFFFFF;
    
    font-family: 'Spezia', helvetica, arial, sans-serif;
    font-weight: 400;
	font-style: normal;
    font-size: 16px;
    line-height: 16px;
    text-decoration: none;
    color: #000000;
    white-space: nowrap;
    
    cursor: pointer;
    transition: all 0.4s ease-out; 
    }


    
a {
    color:black;
    text-decoration: none;
}

a:active {
    color:white;
    text-decoration: none;
}

    
    
.regbtn:hover  {
    border: 1px solid #000000;
    background-color: #000000;
    color: #FFFFFF;
    transition: all 0.2s ease-out;
}
                        
.regbtn .arrowS {
    position: relative;
   margin-right: 8px;
    width:26px;
    
    transition: all 0.4s ease-out;
}


.regbtn:hover .arrowS {
transform: translate(-0.3rem, 0);
    border-color: text-hover-color;
    background-color: #FFFFFF;
    -webkit-clip-path: polygon(
        35% 0%, 35% 9%, 70% 51%, 65% 47%, 69% 50%, 67% 53%, 35% 91%, 35% 100%, 78% 50%, 78% 50%
      );
       clip-path: polygon(
        35% 0%, 35% 9%, 70% 51%, 65% 47%, 69% 50%, 67% 53%, 35% 91%, 35% 100%, 78% 50%, 78% 50%);
}

.regbtn:active  {
    border: 1px solid #a7a7a7;
    background-color: #a7a7a7;
    color: #FFFFFF;
}

.regbtn:active .arrowS {
transform: translate(-0.3rem, 0);
    border-color: text-hover-color;
    background-color: #FFFFFF;
    width:26px;
    -webkit-clip-path: polygon(
        35% 0%, 35% 9%, 70% 51%, 65% 47%, 69% 50%, 67% 53%, 35% 91%, 35% 100%, 78% 50%, 78% 50%
      );
       clip-path: polygon(
        35% 0%, 35% 9%, 70% 51%, 65% 47%, 69% 50%, 67% 53%, 35% 91%, 35% 100%, 78% 50%, 78% 50%);
}



/* Close but  
------------------------------------------------------------------------------------------------------------------------ */


.closebtn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height:54px;
    width: 54px;
    border-radius: 50px;
    margin: 0;
    background-color: transparent;
    
    cursor: pointer;
    transition: all 0.4s ease-out; 
    }


.closebtn:hover  {
    /*border: 1px solid #000000;*/
    background-color: #000000;
    color: #FFFFFF;
    transition: all 0.2s ease-out;
}
                        
.closebtn .cross {
    position: relative;
    width:54px;
    height:54px;
    transition: all 0.2s ease-out;
}

.closebtn:hover .cross {
    width:26px;
    height: 26px;
transform: translate(0rem, 0);
    transition: all 0.2s ease-out;
    background-color: #FFFFFF;
    -webkit-clip-path: polygon(15% 45%, 46% 45%, 46% 15%, 54% 15%, 54% 45%, 85% 45%, 85% 53%, 54% 53%, 54% 85%, 46% 85%, 46% 53%, 15% 53%);
        
        clip-path: polygon(15% 45%, 46% 45%, 46% 15%, 54% 15%, 54% 45%, 85% 45%, 85% 53%, 54% 53%, 54% 85%, 46% 85%, 46% 53%, 15% 53%);
}

.closebtn:active  {
    background-color: #a7a7a7;
    color: #FFFFFF;
}

.closebtn:active .cross {
    background-color: #FFFFFF;
    width:26px;
    -webkit-clip-path: polygon(15% 45%, 46% 45%, 46% 15%, 54% 15%, 54% 45%, 85% 45%, 85% 53%, 54% 53%, 54% 85%, 46% 85%, 46% 53%, 15% 53%);
        clip-path: polygon(15% 45%, 46% 45%, 46% 15%, 54% 15%, 54% 45%, 85% 45%, 85% 53%, 54% 53%, 54% 85%, 46% 85%, 46% 53%, 15% 53% );
}


/* Arrow but  
------------------------------------------------------------------------------------------------------------------------ */

.arwbtn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border: 1px solid #000000;

    height:53px;
    width: 53px;
    border-radius: 50px;
    background-color: transparent;
    
    cursor: pointer;
    transition: all 0.4s ease-out; 
    }


.arwbtn:hover  {
    border: 1px solid #000000;
    background-color: #000000;
    color: #FFFFFF;
    transition: all 0.2s ease-out;
}
                        
.arwbtn .arrowS2 {
    position: relative;
    width:27px;
    transition: all 0.4s ease-out;
}


.arwbtn:hover .arrowS2 {
    width:14px;
    height:16px;
transition: all 0.2s ease-out;
    border-color: text-hover-color;
    background-color: #FFFFFF;
    -webkit-clip-path: polygon(
        35% 0%, 35% 18%, 70% 51%, 65% 47%, 69% 50%, 69% 50%, 35% 82%, 35% 100%, 88% 50%, 88% 50%); 
       clip-path: polygon(
        35% 0%, 35% 18%, 70% 51%, 65% 47%, 69% 50%, 69% 50%, 35% 82%, 35% 100%, 88% 50%, 88% 50%); 
}

.arwbtn:active  {
    border: 1px solid #a7a7a7;
    background-color: #a7a7a7;
    color: #FFFFFF;
}

.arwbtn:active .arrowS2 {
width:14px;
    height:16px;
transform: translate(0rem, 0);
    border-color: text-hover-color;
    background-color: #FFFFFF;
    -webkit-clip-path: polygon(
        35% 0%, 35% 18%, 70% 51%, 65% 47%, 69% 50%, 69% 50%, 35% 82%, 35% 100%, 88% 50%, 88% 50%); 
       clip-path: polygon(
        35% 0%, 35% 18%, 70% 51%, 65% 47%, 69% 50%, 69% 50%, 35% 82%, 35% 100%, 88% 50%, 88% 50%); 
}