:focus{outline: none;}


.subscribe--input {

    padding: 24px 0;

    label {
        color: $c-gray;
    }

    &--container {
        position: relative;

        display: flex;
        align-items: center;
        justify-content: center;

        i {
            position: absolute;
            left: 16px;
            top: 0;
            bottom: 0;
            color: $c-gray;
            opacity: .5;
            margin: auto 0;
            line-height: 56px;
        }

        .button {
            position: absolute !important;
            padding: 0 16px;
            right: 8px;
            top: 0;
            bottom: 0;
            line-height: 56px;
            margin: auto;
            text-transform: capitalize;
        }

        input {
            height: 56px;
            padding-left: 40px;
            font-weight: 600;
        }
        ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
            font-weight: 400;
            opacity: .7;
          }
          
          :-ms-input-placeholder { /* Internet Explorer 10-11 */
            font-weight: 400;
            opacity: .7;
          }
          
          ::-ms-input-placeholder { /* Microsoft Edge */
            font-weight: 400;
            opacity: .7;
          }
    }
    
}
.search--area--input {

    padding: 24px 0;
    &--container {
        position: relative;

        display: flex;
        align-items: center;
        justify-content: center;

        i.icon {
            position: absolute;
            left: 16px;
            top: 0;
            bottom: 0;
            color: $c-gray;
            opacity: .5;
            margin: auto 0;
            line-height: 56px;
        }

        button {
            position: absolute !important;
            padding: 0 16px;
            right: 8px;
            top: 0;
            bottom: 0;
            line-height: 44px;
            margin: auto;
            text-transform: capitalize;
            height: 44px;
            background-color: $c-second;
            border: none;
            border-radius: 4px;
            color: white;

            &:hover {
                background-color: $c-main;
            }
        }

        input {
            height: 56px;
            padding-left: 40px;
            font-weight: 600;
        }
        ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
            font-weight: 400;
            opacity: .7;
          }
          
          :-ms-input-placeholder { /* Internet Explorer 10-11 */
            font-weight: 400;
            opacity: .7;
          }
          
          ::-ms-input-placeholder { /* Microsoft Edge */
            font-weight: 400;
            opacity: .7;
          }
    }
  
  }


.input--col {
    position: relative;
    letter-spacing: 1px;

    input {
        width: 100%; 
        height: 45px;
        border: 1px solid #ECEFF4
    }
}

// .effect-20 ~ .focus-border:before,
// .effect-20 ~ .focus-border:after{content: ""; position: absolute; top: 0; left: 0; width: 0; height: 2px; background-color: $c-main; transition: 0.3s;}
// .effect-20 ~ .focus-border:after{top: auto; bottom: 0; left: auto; right: 0;}
// .effect-20 ~ .focus-border i:before,
// .effect-20 ~ .focus-border i:after{content: ""; position: absolute; top: 0; left: 0; width: 2px; height: 0; background-color: $c-main; transition: 0.4s;}
// .effect-20 ~ .focus-border i:after{left: auto; right: 0; top: auto; bottom: 0;}
// .effect-20:focus ~ .focus-border:before,
// .effect-20:focus ~ .focus-border:after,
// .has-content.effect-20 ~ .focus-border:before,
// .has-content.effect-20 ~ .focus-border:after{width: 100%; transition: 0.3s;}
// .effect-20:focus ~ .focus-border i:before,
// .effect-20:focus ~ .focus-border i:after,
// .has-content.effect-20 ~ .focus-border i:before,
// .has-content.effect-20 ~ .focus-border i:after{height: 100%; transition: 0.4s;}
// .effect-20 ~ label{position: absolute; left: 14px; width: 100%; top: 10px; color: #aaa; transition: 0.3s; z-index: -1; letter-spacing: 0.5px;}
// .effect-20:focus ~ label, .has-content.effect-20 ~ label{top: -18px; left: 0; font-size: 12px; color: $c-main; transition: 0.3s;}