/*=======================================================================================================*/
/*========================================  SECTION CONTACT  ============================================*/
/*=======================================================================================================*/

#contact {padding-bottom:0; min-height:calc(100vh - 257px);}

  #msgBox {margin-bottom:10vh; opacity:0; transition:opacity .3s, top .4s; z-index:100; -webkit-animation-name: msgBoxAnim; animation-name: msgBoxAnim; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
  @keyframes msgBoxAnim {
    0% {opacity: 0;-webkit-transform: translate3d(0, 60px, 0);transform: translate3d(0, 60px, 0);}
    100% { opacity: 1;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
  }
  #sendMessage{opacity:1; transition:opacity .3s;}
  #sendMessage.invisible{opacity:0;}
  .contact-anim-hidden { display:none;}
  
	.contact_message {display:flex; justify-content:center; align-items:center; width:100%; min-height:300px; background:rgba(255,255,255,0.6); border-radius:8px; padding:40px; }
  .contact_message.end_message_ok {background:rgba(245, 255, 244, 0.8); border:2px solid rgb(0, 220, 136); outline:5px solid rgba(214, 255, 225, 0.8)}
  .contact_message.end_message_error {background:rgba(255, 245, 245, 0.8); border:2px solid rgb(255, 152, 152); outline:5px solid rgba(255, 222, 222, 0.8)}

  .contact_message .msgAnim {padding:2em 0;display:flex; align-items:center; -webkit-animation-name: msgAnim; animation-name: msgAnim; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
  @keyframes msgAnim {
    0% {opacity: 0;-webkit-transform: translate3d(0, 60px, 0);transform: translate3d(0, 60px, 0);}
    100% { opacity: 1;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
  }
  .end_message_ok .msg{color:#333;}
  .end_message_ok .icon_anim{ background-color:rgb(0, 156, 96); -webkit-mask-image:url("../img/icons/ok_200_transparent.gif"); mask-image:url("../img/icons/ok_200_transparent.gif");}

  .end_message_error .msg{color:#333;}
  .end_message_error .icon_anim{ background-color:red; -webkit-mask-image:url("../img/icons/warning-1_200_transparent.gif"); mask-image:url("../img/icons/warning-1_200_transparent.gif");}

		.contact_message .msg{display:inline-block;line-height:2em;margin:0 0 0 30px;}
		.contact_message .icon_anim{display:inline-block; position:relative;height:70px;width:70px; min-width:70px; background-size:contain; background-repeat:no-repeat; background-position:center center; 
      -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat: no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center center; mask-position:center center;}
    
		.custom-file-input {
			display:none;
		}
		.custom-file .custom-file-label::after {
			background:var(--dark-color);
			transition: background-color .25s;
			color:#fff;
			height:100%;
			border:none;
			content: "Parcourir...";
		}
		.custom-file:hover .custom-file-label {cursor: pointer;}
		.custom-file:hover .custom-file-label::after { background:green}



  .ajax-form input{ border:none; cursor: text;
      -webkit-transition: all 250ms linear;
      transition: all 250ms linear;}
  
  .ajax-form input, .ajax-form textarea {margin:25px 0; border-radius:4px; border:2px solid transparent; background-color: rgba(255,255,255,0.8); color: #000; line-height: 1; position:relative; width: 100%; padding:20px 20px; font-weight: 400; font-size: 1.2em; z-index:50;}
  .ajax-form input::placeholder, .ajax-form textarea::placeholder {color: rgba(0,0,0,.5);}
  .ajax-form .is-invalid input, .ajax-form .is-invalid textarea {background-color:#fff; border:2px solid var(--main_color);} /*background-color: rgba(255,50,0,.2); */
  .ajax-form .is-valid::after {font-size:1.6em; font-family:'FontAwesome'; right:20px; top:30px; position:absolute;z-index:50; color:rgb(0,180,10); content: "\f00c"; z-index:50;}
  .ajax-form .is-invalid textarea::placeholder,
  .ajax-form .is-invalid input::placeholder {color: rgba(0,0,0,0.8);}
  .ajax-form .is-invalid textarea:focus::placeholder,
  .ajax-form .is-invalid input:focus::placeholder {color: rgba(0,0,0,0.8);}

  .error-tip { font-size:.8em; text-align:center; background-color: red; width:100%; color: #fff; font-weight: bold; line-height: 20px; position: relative; padding: 7px 11px 4px;}
  .error-tip:after {content: ''; position: absolute; left:50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 0; height: 0; top:-11px; border-style: solid; border-width: 0 12px 12px 12px; border-color: transparent transparent red transparent;}
  .label-error{background: linear-gradient(to bottom,  #ad0306 0%,#6d0019 100%);z-index:50; color:#fff; font-size:0.8em; font-weight:500; padding:10px; top:-27px; position:relative; border-bottom-left-radius:4px; border-bottom-right-radius:4px;}
  .label-error.valid{display:none;}
  .label-error.invalid{display:block;}

  .oldbrowser.label-error{top:0; padding:1em; border-radius:4px; line-height:2em; font-size:0.9em; margin-bottom:1.5em;}
  
  /*label*/
  .label-form{position:absolute;top:45px; left:30px; z-index:50; font-size:1em; transition: all .4s;}
  .ajax-form input:focus ~ .label-form, 
  .ajax-form textarea:focus ~ .label-form,
  .ajax-form input:valid ~ .label-form, 
  .ajax-form textarea:valid ~ .label-form {top:0; left:15px; font-size:.9em; color:#fff; }
  @media (max-device-width: 767px){ .label-form{font-size:1em;}}



  .ajax-form textarea {height: 140px; border:none; cursor: text;
      -webkit-transition: all 250ms linear;
      transition: all 250ms linear;}
  .ajax-form textarea,
  .ajax-form input,
  .ajax-form textarea:active,
  .ajax-form input:hover {color: #333;}
  .ajax-form textarea:focus,
  .ajax-form input:focus {  background-color: #fff; outline:2px solid rgba(0,0,0,0.4) !important;}
  .ajax-form input:focus::placeholder,
  .ajax-form textarea:focus::placeholder {color:#222;}
  .ajax-form input::-moz-placeholder,
  .ajax-form input:-moz-placeholder,
  .ajax-form input::-webkit-input-placeholder,
  .ajax-form textarea::-moz-placeholder,
  .ajax-form textarea:-moz-placeholder,
  .ajax-form textarea::-webkit-input-placeholder  {font-size: 13px; color: rgba(0,0,0,.65); font-weight: 700;}


  /*submit btn*/
  .ajax-form button {margin:50px 0 5vh 0; text-transform: uppercase; outline: none !important; position:relative; display:inline-block; border:2px solid rgba(255,255,255,.8);
    transition: all 0.3s; padding:5px 40px; border-radius:50px; background-color:var(--main_color);  color:#fff;}
  .ajax-form button:focus,
  .ajax-form button:active {border:none; outline: none !important;}
  .ajax-form button span{position: relative; display: block; cursor: pointer;
      -webkit-transition: all 250ms linear;
      transition: all 250ms linear;}
  .ajax-form button:hover{background-color: var(--menu-color-hover);}




  .list {margin: 0 auto; padding: 0; text-align: center;}
  .list__item {margin: 0 0 .5rem 0; padding: 0; list-style: none;}
  .list__item:last-child {margin: 0;}
  .label--checkbox {position: relative; line-height: 135%; cursor: pointer; background: transparent; text-align: center;}
  .checkbox {position: relative; top: -0.9rem; margin: 0 2rem 0 0; cursor: pointer; background: transparent; width: 0 !important; height: 0 !important; text-align: center;}
  .checkbox:active,
  .checkbox:focus{border: none; outline: none !important;}
  .checkbox:before {border: 2px solid #888; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; content: ""; position: absolute; left: 0; z-index: 1; width: 1.3rem; height: 1.3rem; border-radius:5px; background: transparent;}
  .checkbox:checked:before {-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); height: .5rem; margin-top: 2px; border-top-style: none; border-right-style: none; background: transparent;}
  .checkbox:after {content: ""; position: absolute; top: -0.125rem; left: 0; width: 1.1rem; height: 1.1rem; background: transparent; cursor: pointer;}
  .checkbox:checked:before{border-color: #888;border-radius:0px;}



    .sebcha-box{overflow:hidden; margin:25px 0;height:80px; position:relative; width:100%; overflow:hidden; box-sizing:border-box;}
      .sebcha-txt{position:relative; height:40px; line-height:40px;}
        .required{font-size:0.8em; position:relative; top:-0.3em; left:0.1em;}
      .sebcha{background:rgba(255,255,255,0.8); border:1px solid rgba(255,255,255,.3);  position:relative; height:100%; width:100%; border-radius:4px; overflow:hidden; display:flex; align-items:center; justify-content:center;}
        /*.sebcha img{width: 100%; height: 100%; object-fit: contain; object-position: center; user-select: none;  -webkit-user-drag: none;}*/
        .sebcha .i{width:70px; height:70px; margin:0 4px; background-size:contain; background-repeat:no-repeat; user-select: none;  -webkit-user-drag: none;}


        /*
        .sebcha .i{filter:blur(15px);}
        .sebcha .i:nth-child(1){animation:blurAnim 4s infinite cubic-bezier(0.075, 0.82, 0.165, 1);}
        .sebcha .i:nth-child(2){animation:blurAnim 4s infinite cubic-bezier(0.075, 0.82, 0.165, 1) 1s;}
        .sebcha .i:nth-child(3){animation:blurAnim 4s infinite cubic-bezier(0.075, 0.82, 0.165, 1) 2s;}
        .sebcha .i:nth-child(4){animation:blurAnim 4s infinite cubic-bezier(0.075, 0.82, 0.165, 1) 3s;}
        @keyframes blurAnim { 0% {filter:blur(15px)} 50% {filter:blur(0px)} 100% {filter:blur(15px)} } 
        */
      /*.is-invalid-sebcha{margin-bottom:40px;}*/
    #sebcha {height:80px;}

    #contact #send {color: #444; font-weight: 600; display: block; max-width: 300px; text-align: center; margin: 20px auto; padding: 10px 80px; border-radius: var(--radius); cursor: pointer; border: 1px solid #ccc; background: #fff; transition: all 0.3s;}
    #contact #send:hover{color:#fff; background:rgb(43, 43, 43);}



  /* CONTACT */
  .contact_container{padding: 10vh 0 15vh 0;}
    .contact-link{display:block; font-size: 18px; line-height: 1.7; letter-spacing: 2px; font-weight: 400; color: #888;
      -webkit-transition: all 250ms linear;
      transition: all 250ms linear;}
    .contact-link:hover{text-decoration: none; color: #000;}




    #attachedfile{display:none;}
    #attachedfileBtn {position:relative; margin:25px 0; border-radius:4px; border:2px solid transparent; background-color: rgba(255,255,255,0.8); color: #000; line-height: 1; position:relative; width: 100%; padding:25px 20px; font-weight: 400; font-size: 1.2em; z-index:50;}
      
      #attachedfileBtn .btn{position:absolute; left:15px; top:50%; transform:translateY(-50%); cursor:pointer; background:#6a7ef4; color:#fff; transition:all .3s; border:1px solid rgba(0,0,0,0.2); padding:5px 20px; border-radius:8px; margin:0 10px 0 0;}
      #attachedfileBtn .btn:hover{background:#505bda;}
      #selectedFiles{display:flex; flex-wrap:wrap; gap:8px; position:relative; left:8.5em; width:calc(100% - 8.5em); font-size:.8em;}
      #selectedFiles > span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:inline-block; background:#fff; padding:6px 15px; border-radius:30px; margin:0 8px 0 0}





  /*media queries*/
  @media (max-width: 1300px) {
  }
  @media (max-width: 1199px) {
  }
  @media (max-width: 991px) {
  }
  @media (max-width: 767px) {
  }
  @media (max-width: 575px) {
  }