@charset "UTF-8";

@font-face {
    font-family: "Neue";
    src: url('../font/NHaasGroteskTXPro-55Rg.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: "Jabin";
  src: url('../font/Jabin-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-thumb {
  background: transparent;
  border: 0px none transparent;
  border-radius: 0px;
}
::-webkit-scrollbar-thumb:hover {
  background: transparent;
}
::-webkit-scrollbar-thumb:active {
  background: transparent;
}
::-webkit-scrollbar-track {
  background: transparent;
  border: 0px none transparent;
  border-radius: 0px;
}
::-webkit-scrollbar-track:hover {
  background: transparent;
}
::-webkit-scrollbar-track:active {
  background: transparent;
}
::-webkit-scrollbar-corner {
  background: transparent;
}

.grecaptcha-badge{
  display: none !important;
}

html body nav a{
  text-decoration: none !important;
  color: #FFF;
  text-decoration-color: rgba(255, 255, 255, 0);
}

.projet p{
  text-transform: none;
  margin-top: 1rem;
  margin-bottom: unset;
}

.projet p a{
  margin-top: 1rem;
  display: block;
}

html body nav a:hover { text-decoration: none !important; }
html body nav a:active { text-decoration: none !important; }
html body nav a:visited { text-decoration: none !important; }

#wpcf7-f78-p14-o1{
  position: fixed;
  left: 50vw;
  width: 50vw;
}

#wpcf7-f78-p14-o1 > form{
  width: calc(100% - 2rem);
}

#projets .liste_posts{
  display:none;
}

#projets{
  display: flex;
  align-items: flex-start;
}

#projets ul{
  width: calc(33.33% - 0.33rem);
}

#projets ul li.box{
  margin-bottom: 0.5rem;
}

#projets ul:not(:last-child){
  margin-right: 0.5rem;
}

.wpcf7-not-valid-tip{
  margin-bottom: 10px;
  margin-top: -10px;
  font-size: 13px;
}

.wpcf7 form.invalid .wpcf7-response-output{
  color: #dc3232;
  font-size: 13px;
  border: none;
  margin: 0;
  padding: 0;
}

#wpcf7-f78-p14-o1 p input, #wpcf7-f78-p14-o1 p textarea{
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  outline: none;
  display: block;
  width: 100%;
  border: none;
  border-bottom: 1px solid #FFF;
  font-family: 'Neue', 'Helvetica', 'Arial Narrow', Arial, sans-serif;
  font-size: 1.1rem;
  color: #FFF;
  background-color: #000;
  margin-bottom: 15px;
  border-radius: 0px;
}

#wpcf7-f78-p14-o1 p textarea{
  margin-bottom: 1rem;
}

#wpcf7-f78-p14-o1 p input::-webkit-input-placeholder, #wpcf7-f78-p14-o1 p textarea::-webkit-input-placeholder{
  color: rgba(255, 255, 255, 0.5);
}

#wpcf7-f78-p14-o1 p input::-moz-placeholder, #wpcf7-f78-p14-o1 p textarea::-moz-placeholder{
  color: rgba(255, 255, 255, 0.5);
}

#wpcf7-f78-p14-o1 p input:-ms-input-placeholder, #wpcf7-f78-p14-o1 p textarea:-ms-input-placeholder{
  color: rgba(255, 255, 255, 0.5);
}

#wpcf7-f78-p14-o1 p input::-ms-input-placeholder, #wpcf7-f78-p14-o1 p textarea::-ms-input-placeholder{
  color: rgba(255, 255, 255, 0.5);
}

#wpcf7-f78-p14-o1 p input::placeholder, #wpcf7-f78-p14-o1 p textarea::placeholder{
  color: rgba(255, 255, 255, 0.5);
}

#wpcf7-f78-p14-o1 textarea{
  resize:none;
  overflow: hidden;
  height: 25px;
}

.button_email{
  height: 30px;
  padding: 0 25px;
  background: rgb(188,223,255);
  background: linear-gradient(0deg, rgba(188,223,255,1) 0%, rgba(0,82,158,1) 100%);
  border-radius: 25px;
  border: 1px solid #2d333a;
  color: #0c0904;
  font-size: 1rem;
  text-transform: uppercase;
  position: relative;
  cursor: pointer;
  outline: none;
  display: block;
}

.button_email .text_button{
  display: block;
  z-index: 3;
  position: relative;
  font-family: 'Neue', 'Helvetica', 'Arial Narrow', Arial, sans-serif;
}

.button_email .before{
  content: "";
  height: 10px;
  display: block;
  position: absolute;
  top: 1px;
  border-radius: 15px 15px 5px 5px;
  background: linear-gradient(to bottom, #c9daf4 0%,rgba(255, 255, 255, 0.2) 100%);
  z-index: 2;
  filter: blur(1px);
  left: 5px;
}

.button_email .after{
  content: "";
  height: 10px;
  display: block;
  position: absolute;
  bottom: 1px;
  border-radius: 5px 5px 15px 15px;
  background: linear-gradient(to bottom, #9ce9f600 0%,#9ce8f6 100%);
  z-index: 2;
  filter: blur(1px);
  left: 5px;
}





























































/*---------SMARTPHONE---------*/
@media only screen and (max-width: 767px) {
  html body{
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    background-color: #000;
    font-family: 'Neue', 'Helvetica', 'Arial Narrow', Arial, sans-serif;
    font-size: 1.1rem;
    line-height: 1.3rem;
    color: #FFF;
    text-transform: uppercase;
    font-weight: normal;
  }

  .single .projet{
    padding: 0 1rem;
  }

  .container .w25{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }

  #projets{
    padding: 0 1rem;
  }

  .page-template-default .content{
    padding: 0 1rem;
  }

  #projets ul.liste_posts{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }

  #projets ul li{
    width: 100%;
    margin-bottom: -1px;
  }

  .container .w25 p, .container .w25 h3{
    padding: 0;
    font-size: 1.1rem;
    font-weight: 400;
    text-transform: none;
  }

  #wpcf7-f78-p14-o1{
    position: relative;
    left: unset;
    width: unset;
    margin: 2rem 0;
  }

  #wpcf7-f78-p14-o1 > form{
    width: 100%;
  }

  #projets ul{
    width:50%;
  }

  .page-id-12 .container > p, .page-id-8 .container > p{
    text-align: center
  }

  #langues .actif_lang{
    font-family: 'Jabin', 'Helvetica', 'Arial Narrow', Arial, sans-serif;
  }

  .wp-block-image figcaption, .wp-block-video figcaption{
    text-transform: none;
    margin-top: 1rem;
    margin-bottom: unset;
  }

  html{
    margin-top: 0 !important;
  }

  .lien_projet{
    display: none;
  }
  
  h2, em, strong{
      font-size: 1.1rem;
      line-height: 1.2rem;
      font-style: normal;
      font-weight: normal;
  }
  
  header{
    padding: 13px 13px 70px 13px;
  }
  
  header h1 img{
    height: 3rem;
    position: fixed;
    z-index: 5;
    left: 1rem;
    top: 1rem;
  }

  #plus_menu{
    height: 1.8rem;
    position: fixed;
    z-index: 5;
    top: 24px;
    right: 1rem;
    transition: transform 1s cubic-bezier(.7,.01,.27,.99);
    transform: rotate(0deg);
  }
  
  a:hover{
    font-family: 'Jabin', 'Helvetica', 'Arial Narrow', Arial, sans-serif !important;
  }
  
  .actif{
    font-size: 1.3rem;
  }
  
  .container{
    margin: 0 auto;
    width: 100%;
  }
  
  .box img{
    width: 100%;
    height: auto;
    display: block;
  }
  
  .felixjuhel{
    left: 4.5%;
    bottom: 5.5vh;
    font-size: 2.9vw;
    position: fixed;
  }
   
   a{
     text-decoration: none;
     color: #FFF;
   }
   
   #menuToggle {
    display: block;
    position: fixed;
    top: -100vh;
    left: 0;
    z-index: 3;
    height: 100vh;
    width: 100vw;
    background-color: black;
    opacity: 0;
    transition: opacity 1s cubic-bezier(.7,.01,.27,.99);
   }
   
   #menu{
    margin: 70px 1rem;
    font-size: 2.9rem;
    line-height: normal;
   }

   #menu li{
     overflow: hidden;
   }

   #menu li a{
     display: inline-block;
   }

   .actif{
    font-size: 3.2rem;
    font-family: 'Jabin', 'Helvetica', 'Arial Narrow', Arial, sans-serif;
   }

   .w25 nav{
     display: none;
   }
  
   .felixjuhel{
    left: 13px;
    bottom: 20px;
    font-size: 5vw;
    position: fixed;
    z-index: 5;
  }
  
  .fleche{
    top: 19px;
    left: calc(100% - 120px);
    font-size: 5vw;
    position: fixed;
    z-index: 5;
    width: 32px;
  }

  .projet img{
    width: 100%;
    height: unset;
  }

  .projet iframe{
    width: 100%;
  }
  
  .projet figcaption, .w75, .about-me p{
    background-color: #000;
  }

  .formulaire{
    padding: 26px 13px 0 13px; 
  }

  .formulaire input[type="text"],
  .formulaire input[type="date"],
  .formulaire input[type="datetime"],
  .formulaire input[type="email"],
  .formulaire input[type="number"],
  .formulaire input[type="search"],
  .formulaire input[type="time"],
  .formulaire input[type="url"],
  .formulaire input[type="password"],
  .formulaire textarea,
  .formulaire select 
  {
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      outline: none;
      display: block;
      width: 100%;
      border: none;
      border-bottom: 1px solid #FFF;
      font-family: 'Neue', 'Helvetica', 'Arial Narrow', Arial, sans-serif;
      font-size: 1rem;
      height: auto;
      color: #FFF;
      background-color: #000;
      margin-bottom: 10px;
  }
  
  .formulaire textarea{
      resize:none;
      overflow: hidden;
  }
  
  .formulaire button{
      background-color: #000;
      border: none;
      display: inline-block;
      cursor: pointer;
      color: #FFFFFF;
      font-family: 'Neue', 'Helvetica', 'Arial Narrow', Arial, sans-serif;
      font-size: 1rem;
      padding: 0;
      text-decoration: none;
  }
  
  .formulaire button:hover{
    font-family: 'Jabin', 'Helvetica', 'Arial Narrow', Arial, sans-serif;
    font-size: 1.3rem;
  }
  
  .w25 p, .w25 h2{
    padding: 0 13px;
  } 

  .w75 a, .projet a{
    color: #FFF;
    text-decoration: underline;
  }

  #menu li a{
    transform: translateY(60px);
    transition: transform .9s cubic-bezier(.7,.01,.27,.99);
  }

  #langues{
    z-index: 10;
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    overflow: hidden;
    transform: translateY(70px);
    transition: opacity 1s cubic-bezier(.7,.01,.27,.99);
    height: 61px;
    overflow: hidden;
    display: block;
  }

  #langues p{
    font-size: 2.9rem;
    height: 61px;
    transform: translateY(67px);
    transition: transform .9s cubic-bezier(.7,.01,.27,.99);
    display: block;
    line-height: 1;
  }

  .page-id-10 .container > figure > div > img{
    width: 100%;
    height: auto;
  }

  .page-id-10 .container > figure > figcaption{
    margin: 1rem 0;
  }
}

.wp-block-image figcaption, .wp-block-video figcaption{
  text-transform: none;
  margin-top: 1rem;
  margin-bottom: unset;
}


/*---------DESKTOP---------*/
@media only screen and (min-width: 768px) {

    html{
      overflow: unset;
    }

    #langues .actif_lang{
      display: block;
      font-family: 'Jabin', 'Helvetica', 'Arial Narrow', Arial, sans-serif;
      font-size: 1.2rem;
      margin-right: 5px;
    }

    .page-id-14 .container{
      margin: 0;
      width: unset;
      padding-left: 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      position: fixed;
      left: 25vw;
    }

    .page-id-14 .container > .w25{
      text-transform: none;
      width: unset;
    }

    .page-id-14 .container > .w25 a{
      color: white;
      font-weight: 400;
      text-decoration: unset;
    }

    .page-id-14 .container > .w25 a:hover{
      font-size: 1.2rem;
    }

    

    html body{
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      background-color: #000;
      font-family: 'Neue', 'Helvetica', 'Arial Narrow', Arial, sans-serif;
      font-size: 1.1rem;
      line-height: 1.3rem;
      color: #FFF;
      text-transform: uppercase;
      font-weight: normal;
    }
    
    h2, em, strong{
        font-size: 1.1rem;
        line-height: 1.2rem;
        font-style: normal;
        font-weight: normal;
    }

    #mobile{
      display: none;
    }

    body header{
        padding: 1rem;
        padding-bottom: 4rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        position: fixed;
        background-color: #000;
        width: calc(100% - 2rem);
        z-index: 10;
    }

    body.page-id-8 header{
      background-color: transparent;
    }
    
    body header nav{
      position: fixed;
      left: calc(25% + 0.65rem);
      top: calc(62px - 1rem);
    }

    header nav p{
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      width: 82px;
    }
    
    nav input, nav span{
        display: none;
    }
    
    main{
        padding: 1rem;
        height: 100%;
        padding-top: calc(84px + 3rem);
    }
    
    header h1 img{
        height: 3rem;
    }

    a:hover{
      font-family: 'Jabin', 'Helvetica', 'Arial Narrow', Arial, sans-serif;
      font-size: 1.3rem;
    }
    
    .actif{
      font-family: 'Jabin', 'Helvetica', 'Arial Narrow', Arial, sans-serif !important;
      font-size: 1.3rem !important;
    }
    
    .felixjuhel{
        left: 4.5%;
        bottom: 5.5vh;
        font-size: 2.9vw;
        position: fixed;
    }

    .fleche{
      display: none;
    }
    
    article figure img{
      width: 100%;
      height: auto;
    }
    
    .flex-fixed50{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        position: fixed;
        width: calc(50% - 0.5rem);
    }
    
    .flex-fixed25{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        position: fixed;
        width: 22.75%;
    }
    
    .w25p{
        width:50%;
    }
    
    .w25{
        width: 50%;
        padding: 0 7.5px;
    }
    
    .w75{
        width: 75%;
        padding-left: 25%;
    }
    
    .projet{
        width: calc(50% - 1rem);
        padding-left: calc(50% + 1rem);
    }
    
    .about-me{
        width: 40vw;
        padding-left: 53%;
    }
    
    .container{
        margin: 0 auto;
        width: calc(50% - 1rem);
        padding-left: calc(50% + 1rem);
    }
    
    .container2{
        width: 75%;
        padding-left: 22.75%;
    }
    
    .box img{
        width: 100%;
        height: auto;
        display: block;
    }
    
    ::-moz-selection{
        background-color: #FFF;
        color: #000;
      }
    
    ::selection{
        background-color: #FFF;
        color: #000;
      }
    
      .projet iframe{
        width: 100%;
      }
    
      .formulaire{
        width: 100%;
        color: #FFF;
    }
    
    .formulaire input[type="text"],
    .formulaire input[type="date"],
    .formulaire input[type="datetime"],
    .formulaire input[type="email"],
    .formulaire input[type="number"],
    .formulaire input[type="search"],
    .formulaire input[type="time"],
    .formulaire input[type="url"],
    .formulaire input[type="password"],
    .formulaire textarea,
    .formulaire select 
    {
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        outline: none;
        display: block;
        width: 100%;
        border: none;
        border-bottom: 1px solid #FFF;
        font-family: 'Neue', 'Helvetica', 'Arial Narrow', Arial, sans-serif;
        font-size: 1rem;
        height: auto;
        color: #FFF;
        background-color: #000;
        margin-bottom: 10px;
    }
    
    .w75 a, .projet a{
      color: #FFF;
      text-decoration: underline;
    }

    #plus_menu{
      display: none;
    }

    #langues p a:first-child{
      padding-right: 0.2rem;
    }

    #langues p a:last-child{
      padding-left: 0.2rem;
    }

    #langues .actif{
      font-size: 1.3rem;
    }

    #langues p a:hover{
      font-size: 1.3rem;
    }

    .wp-block-image figcaption, .wp-block-video figcaption{
      text-transform: none;
      margin-top: 1rem;
      margin-bottom: unset;
    }

    .page-id-10 .container{
      position: fixed;
    }

    .page-id-10 .container > figure{
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
    }

    .page-id-10 .container > figure > div {
      width: calc(33.33% - 0.5rem);
      height: fit-content;
    }

    .page-id-10 .container > figure > div > img {
      height: 100%;
    }

    .page-id-10 .container > figure > figcaption{
      padding-top: 0;
      width: calc(100% - 33.33%);
      margin: 0 1rem 0 1.5rem
    }

    header h1 > a{
      height: 3rem;
        display: block;
        overflow: hidden;
    }
    

}

#langues p:hover{
  cursor: default;
}

#langues .actif_lang:hover{
  cursor: pointer;
}

.page-id-14 #the_title, .page-id-12 #the_title, .page-id-8 #the_title, .page-id-10 #the_title{
  display: none;
}

.page-id-8 .container, .page-id-12 .container, .page-id-10 .container{
  margin: 0 auto;
  width: unset;
  padding-left: 0;
}

.wp-block-embed{
  margin-bottom: 0;
}

.wp-block-video figcaption a:hover{
  font-family: unset;
  font-size: 1.1rem;
}
.wp-block-video figcaption a{
  margin-top: 1rem;
  display: block;
}

.wp-block-image{
  margin-bottom: 0;
}

.button_resume{
  height: 30px;
  padding: 0 25px;
  background: rgb(188,223,255);
  background: linear-gradient(0deg, rgba(188,223,255,1) 0%, rgba(0,82,158,1) 100%);
  border-radius: 25px;
  border: 1px solid #2d333a;
  color: #0c0904;
  font-size: 1rem;
  text-transform: uppercase;
  position: relative;
  cursor: pointer;
  outline: none;
  display: flex;
  width: fit-content;
  align-items: center;
  text-decoration: none;
  margin-top: 1rem;
}

.button_resume .text_button{
  display: block;
  z-index: 3;
  position: relative;
  font-family: 'Neue', 'Helvetica', 'Arial Narrow', Arial, sans-serif;
}

.button_resume:hover{
  font-size: 1rem;
}

.button_resume .before{
  content: "";
  height: 10px;
  display: block;
  position: absolute;
  top: 1px;
  border-radius: 15px 15px 5px 5px;
  background: linear-gradient(to bottom, #c9daf4 0%,rgba(255, 255, 255, 0.2) 100%);
  z-index: 2;
  filter: blur(1px);
  left: 5px;
}

.button_resume .after{
  content: "";
  height: 10px;
  display: block;
  position: absolute;
  bottom: 1px;
  border-radius: 5px 5px 15px 15px;
  background: linear-gradient(to bottom, #9ce9f600 0%,#9ce8f6 100%);
  z-index: 2;
  filter: blur(1px);
  left: 5px;
}

/* ---------- LOCALISATION + HEURE ---------- */
#langues span{ display: inline !important; }
header #langues p{ display: block; width: auto; }
#langues .colon{ animation: fj-blink 1s steps(1) infinite; }
@keyframes fj-blink{ 50%{ opacity: 0; } }
@media only screen and (max-width: 767px){
  #langues p{ font-size: 2rem; }
}

/* ---------- ANIMATION D'APPARITION ---------- */
.w{
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: .12em;
  margin-bottom: -.12em;
}
.w > span{ display: inline-block; }
html.anim .w > span{ transform: translateY(110%); }

html.anim .lien_projet > li{ overflow: hidden; }
html.anim .lien_projet > li > a{ display: block; width: fit-content; transform: translateY(22px); }

html.anim #projets .box img,
html.anim .projet img,
html.anim .projet video,
html.anim .content .container img{ opacity: 0; }

html.anim .content .container p,
html.anim .content .container h3,
html.anim .content figcaption,
html.anim .projet p,
html.anim .tf-cell{ visibility: hidden; }
html.anim .is-split{ visibility: visible !important; }

@media only screen and (min-width: 768px){
  html.anim.intro header h1 img{ transform: translateY(3rem); }
  html.anim.intro #menu > li,
  html.anim #langues{ overflow: hidden; }
  html.anim.intro #menu > li > a,
  html.anim #langues > p{ display: block; width: fit-content; transform: translateY(22px); }
}
@media only screen and (max-width: 767px){
  html.anim.intro header h1 img{ opacity: 0; }
}

/* ---------- PROJETS ---------- */
.projet .medias{ display: flex; flex-direction: column; gap: .5rem; }
.projet .m-row{ display: flex; gap: .5rem; align-items: flex-start; }
.projet .m{ min-width: 0; }
.projet .m img, .projet .m video{ display: block; width: 100%; height: auto; }
.projet .desc{ margin-top: 1rem; text-transform: none; }
.projet .desc p{ margin: 0 0 .5rem; }
.projet .desc .sub{ opacity: .5; }

/* ---------- TYPEFACES ---------- */

.typefaces{
  width: calc(75% - 3px);
  padding-left: calc(25% + 3px);
}

.tf{ margin-bottom: 3rem; }
.tf-head{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; align-items: start; margin-bottom: 2px; text-transform: none; }
.tf-cell{ margin: 0; font-size: 1.1rem; }
.tf-head p.tf-cell{ opacity: .5; }
.tf-btns{ display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
.tf-btn{ border: 1px solid #FFF; border-radius: 2rem; padding: .3rem .9rem; color: #FFF; text-decoration: none; font-size: .9rem; white-space: nowrap; line-height: 1.2; }
a.tf-btn:hover{ font-family: inherit; font-size: .9rem; background: #FFF; color: #000; }
.tf-btn--off{ opacity: .4; cursor: default; }
.tf-sample{
  display: block; width: 100%; padding: 0; border: 0; outline: 0; resize: none; overflow: hidden;
  background: transparent; color: #FFF; text-transform: none;
  font-size: clamp(2.5rem, 6vw, 6rem); line-height: 1.05;
  opacity: 0; transition: opacity .6s;
}
.tf-sample.tf-on{ opacity: 1; }
/* Typefaces alignée sur #langues */
@media only screen and (min-width: 768px){
  .page-template-page-typefaces header{ width: calc(50% - 2rem); }
  .typefaces{ margin-top: calc(148px - 1rem - 84px - 3rem); }
  .page-id-8 .flex-fixed50{
    width: 22.75%;
  }
}
@media only screen and (max-width: 767px){
  .typefaces{ width: auto; padding: 0 1rem; }
  .tf-head{ grid-template-columns: 1fr 1fr; }
  .tf-btns{ justify-content: flex-start; }
}


/* ---------- MASQUE D'APPARITION (boutons + textarea) ---------- */
.tf-mask{ overflow: hidden; padding: 0 20px 26px; margin: -7px -20px -26px; }
.tf-mask--area{ padding: 0; margin: 0; }
html.anim .tf-mask > *{ transform: translateY(calc(100% + 30px)); }

/* ---------- BOUTON NOT FOR SALE ---------- */
.apple_white{
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 25px;
  background: linear-gradient(0deg, #F6F6F6 0%, #8e8e8e 100%);
  border-radius: 25px;
  color: #101010;
  font-size: 1rem;
  text-transform: uppercase;
  position: relative;
  cursor: default;
  border: solid 1px #7a7a7a;
  /*box-shadow: 0px 7px 18px #cfcfcf, inset 0px 0px 3px 1px #00000024;*/
  outline: none;
  white-space: nowrap;
  cursor: not-allowed;
  user-select: none;
}

.apple_white .text_button{
  display: block;
  position: relative;
  z-index: 3;
  font-family: 'Neue', 'Helvetica', 'Arial Narrow', Arial, sans-serif;
}

.apple_white .before_white{
  height: 10px;
  display: block;
  position: absolute;
  top: 1px;
  left: 5px;
  border-radius: 15px 15px 5px 5px;
  background: linear-gradient(to bottom, #f2f2f2 0%, #fefefe66 100%);
  z-index: 2;
  filter: blur(1px);
}

.apple_white .after_white{
  height: 10px;
  display: block;
  position: absolute;
  bottom: 0px;
  left: 5px;
  border-radius: 5px 5px 15px 15px;
  background: linear-gradient(to bottom, #f2f2f22b 0%, #aba8a8 100%);
  z-index: 2;
  filter: blur(1px);
}