/*------------------------------------*\
    #Newsletter
\*------------------------------------*/

.newsletter {
    h3 {
        font-size: 30px;
        line-height:1.5;
        margin-bottom: 57px;
    }

    p {
        font-weight: 700;
        margin-bottom: 43px;
    }

    form{

        .form-control {
            background-color: #f6f7fb;
            border: none;
            font-size: 15px;
            color: $color-body;
            font-weight: 400;
            padding: 0 21px;
            height: 40px;
            margin-bottom: 0;
            -webkit-border-radius: 25px;
            border-radius: 25px;

            &::-webkit-input-placeholder {
                color: $color-body;
            }
            
            &::-moz-placeholder {
                color: $color-body;
            }
            
            &::-moz-placeholder {
                color: $color-body;
            }
            
            &::-ms-input-placeholder {
                color: $color-body;
            }
            
        }
        
        button {
            position: absolute;
            top: 10px;
            right: 10px;
            border: none;
            color: $color-black;
            background-color: transparent;
            cursor: pointer;
            font-weight: 600;

            i {
                margin-left: 7px;
            }
            
        }
    }
}

/* newsletter #2 */
.newsletter-2{
    form{
        .form-control {
            width: 345px;
            margin: 0 17px 20px 0;
        
        }

        button {
            position: static;
            background-color: $color-theme;
            color: $color-white;
            width: 145px;
            height: 40px;
            line-height: 38px;
            border: 2px solid transparent;
            font-size: 11px;
            margin-bottom: 20px;
        }
    }
}

/* newsletter #3 */

.newsletter-3 {
    padding: 205px 0;

    .heading--title {
        color: $color-white;
        margin-bottom: 4px;
    }

    .heading--desc {
        font-size: 16px;
        font-weight: 700;
        line-height: 26px;
        margin-bottom: 54px;
        color: $color-white;
    }

    .sub--desc {
        font-size: 12px;
        font-weight: 700;
        line-height: 22px;
        margin-bottom: 31px;
        letter-spacing: 3px;
        color: $color-white;
        text-transform: uppercase;
        display: block;
    }

    form,
    .form-group {
        margin-bottom:0;
    }

    form{
        .form-control {
            border-radius: 0;
            height: 50px;
            padding-right: 180px;
            background-color: #f0f5f9;
        }

        button {
            position: absolute;
            top: 0;
            right: 0;
            height: 50px;
            line-height: 48px;
            font-size: 11px;
            background-color: $color-black;
            color: $color-white;

            &:hover {
                background-color: $color-white;
                color: $color-theme;
            }
        }   
    }
}

/* NEWSLETTER #4 */

.newsletter-4 {
    padding: 120px 0;

    .heading--title {
        color: $color-black;
        margin-bottom: 6px;
    }

    .heading--desc,
    .sub--desc {
        color: $color-body;
    }

    .heading--desc {
        margin-bottom: 0;
    }

    form{

        button {
            background-color: $color-theme;

            &:hover {
                background-color: $color-black;
                color: $color-white;
            }
        }
    }   
}

/* Custom, iPhone Retina */

@media only screen and (min-width: 320px) and (max-width: 767px) {
    .form-inline .form-group {
        width: 100%;
    }

    .newsletter-2{
        form {
            .form-control {
                width: 100%;
            }
        }
    }

    .newsletter-3{
        form{
            .form-control {
                padding-right: 150px;
            }

            button {
                width: 140px;
            }
        }
    
    }

    .newsletter-4 {
        padding: 60px 0;

        .heading--desc {
            margin-bottom: 30px;
        }
    }
}

@media only screen and (min-width: 320px) and (max-width: 400px) {
    .newsletter-3 {
        form {
            button {
                position: static;
            }

            .form-control {
                padding-right: 0;
                margin-bottom: 20px;
            }
        }
    }
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) and (max-width : 991px) {
    .newsletter-2{
        form {
            .form-control {
                width: 100%;
            }
        }
    
    }
    .newsletter-3{
        form {
            button {
                width: 120px;
            }

            .form-control {
                padding-right: 120px;
            }
        }
    
    }
}