/********************************************
************ Floating label ****************
*********************************************/

.form-contact .form-group {
    /* Form group*/
    position: relative;
}

/******* Label *******/

.form-contact .form-group label {
    /* Input field floating label */
    position: absolute;
    font-size: 0.8em;
    top: 0px;
    width: 100%;
    padding: 0 10px;
    margin: 8px 0 10px 0;
    opacity: 0;
    transition: opacity 0.2s ease-out;
    /* prevent flickering */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    pointer-events: none;
}

.form-contact .show-label label {
    /* Active state for label when visible */
    opacity: 1;
}

/******** Form control fields ********/

.form-contact .form-control {
    /* Form control fields */
    height: 62px;
    padding: 15px 10px;
    box-shadow: 0 0 0 2px transparent;
    transition: all 0.2s ease-out;
    margin: 10px auto;
}


/********************************************
************ Textarea ***********************
*********************************************/
.form-contact .form-group-textarea label {
    /* Textarea floating label */
    background-color: white;
    width: auto;
    right: 0;
    left: 0;
    margin: 1px 18px 1px 1px;
    border-radius: 3px 3px 0 0;
    padding-top:2px;
  }
  
  .form-contact .form-group-textarea .form-control {
    /* Textarea */
    min-height: 200px;
    max-height:250px;
    max-width:100%;
    min-width: 100%;
  }
  
  /********************************************
  ************ Select *************************
  *********************************************/
  
  .form-contact .form-group-select label {
    /* Select floating label */
    opacity: 1;
    z-index: 1;
  }
  
  .form-contact .form-group-select .form-control {
    /* Select */
    padding-top: 25px;
    padding-bottom: 5px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
  }
  
  .select-wrapper {
    /* Select wrapper */
    position:relative;
    z-index: 0;
  }
  
  .select-wrapper:before {
    /* Select arrow image background */
    content:'';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width:50px;
    background-position: center center;
    background-repeat: no-repeat;
    pointer-events: none;
    background-image: url(https://tlc-web.qcode.co.uk/Graphics/dropdown-arrow-down-dark.svg);
  }