@mixin material_font_icon($icon, $size: 20px, $col: $col_1, $display: false) {
    //@extend .material-icons;  
    content: $icon;
    @if($display) { display: $display; }
    width: $size;
    height: $size;
    display: inline-block;
    margin-right: 2px;
    vertical-align: top;
    color: $col;
    font-size: $size;
    font-weight: normal;
    font-style: normal;
    font-family: $material_icons;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;    
    white-space: nowrap;
    word-wrap: normal;
    word-break: normal;
    direction: ltr;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    @include breakpoint($desk, true){
       margin-right: 10px;
     }
  }
// creates a close button
@mixin close_btn($width: 20px, $height: 20px, $piece_width: 2px, $piece_bg_col: #626262) {
   position: relative; 
   z-index: 1;
   display: block;
   max-width: $custom_row_width;
   margin: 0 auto;   
   cursor: pointer;
   &:before{
      content: "arrow_back";
      position: absolute;
      top: 14px;
      bottom: 0;
      left: 0;
      display: inline-block;
      overflow: hidden;
      width: 34px;
      height: 34px;
      color: $col_12;
      font-size: 30px;
      font-family: 'Material Icons';
      text-rendering: optimizeLegibility;
      font-feature-settings: "liga" 1;
      font-style: normal;
      text-transform: none;
      line-height: 1;
      word-wrap: normal;
      word-break: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
     }   
  }
@mixin title {
      h1{
        display: inline-block;
        padding: 11px 0;
        vertical-align: middle;        
        color: $col_5;            
        font-weight: 400;
        font-size: 34px; 
        line-height: 40px;
        >em{
          font-size: 24px;
        }
      }
   }

@mixin input {
 .form-text,
 .form-date,
 .form-time,
 .form-url,
 .form-number,
 .form-search,
 .form-email {   
   background-color: transparent;
   border: solid rgba(12, 12, 12, 0.3)!important;
   border-width: 0 0 1px 0!important;
   box-shadow: none;
   border-radius: 0;
   width: 100%;
   padding: 0 15px 0 5px;
   margin-bottom: 1px;
   color: $col_4; 
   font-size: 16px;
   line-height: 30px;
   text-transform: none;
   cursor: text; 
   overflow-wrap: break-word;
   word-wrap: break-word;
   -ms-word-break: break-all;
   word-break: break-word;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;  
   @include breakpoint($tab, true) {
     overflow: visible;
    }
  }
 .form-text:hover,
 .form-date:hover,
 .form-time:hover,
 .form-url:hover,
 .form-number:hover,
 .form-search:hover,
 .form-email:hover,
 .form-text:active,
 .form-date:active,
 .form-time:active,
 .form-url:active,
 .form-number:active,
 .form-search:active,
 .form-email:active,
 .form-text:focus,
 .form-date:focus,
 .form-time:focus,
 .form-url:focus,
 .form-number:focus,
 .form-search:focus,
 .form-email:focus{
    background: none;
    background-color: transparent;
    outline: 0;
   }
  .form-textarea{
    background-color: transparent;
    border: solid rgba(12, 12, 12, 0.3)!important;
    border-width: 0 0 1px 0!important;
    box-shadow: none;
    border-radius: 0;
    width: 100%;
    padding: 0 15px 0 5px;
    margin-bottom: 1px;
    color: $col_4; 
    font-size: 16px;
    line-height: 30px;
    text-transform: none;
    cursor: text; 
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-word;
  }
 .form-textarea:hover,
 .form-textarea:active,
 .form-textarea:focus{
    background: none;
    background-color: transparent;
    outline: 0;
  }
}

@mixin label{
  label,
  .label{
    margin: 12px 0 0 0;
    color: #9e9e9e;
    font-size: 13px;
    font-weight: 500;
    line-height: 30px;
    letter-spacing: 0.2px;             
    cursor: default;            
    @include breakpoint($tab, true){
        margin: 0;
     }
   }
}
@mixin add-button{
   input.field-add-more-submit{
      z-index: 11; 
      width: 100%;
      padding: 7px 2.5em;
      margin: 0;
      margin-top: 0; 
      border: none!important;
      border-radius: 0;
      background: none;
      box-shadow: none;
      color: $col_1; 
      font-size: 14px;
      font-weight: 500;       
      text-align: left;
      text-transform: uppercase;
      cursor: pointer;            
      &:focus{
          border: none;               
          border-radius: 0;
          background: transparent!important;
          box-shadow: none;
          text-decoration: none;                
          cursor: text;
          }
       &:hover {               
          border-radius: 0;
          background: transparent!important;
          box-shadow: none;
          text-decoration: none;
         }
        &:active{
          background:transparent!important;                    
          }
       } 
    }

 