/*------------------------------------*\
    #Heading
\*------------------------------------*/

.heading {

    .heading--title {
        font-family: $font-heading;
        color: $color-heading;
        font-size: 36px;
        font-weight: 700;
        line-height: 1.5;
        margin-bottom: 22px;
    }

    .heading--subtitle {
        font-family: $font-body;
        color: $color-body;
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
        margin-bottom: 14px;
        letter-spacing: 2px
    }

    .heading--desc {
        font-size: 18px;
        font-weight: 400;
        line-height: 28px;
        margin-bottom: 0;
    }
    
    .heading--img {
        margin-bottom: 18px;
    }
}

/* heading #2 */
.heading-2 {
    .heading--title {
        font-size: 48px;
    }    
}

/* heading #3 */
.heading-3 {
    .heading--title {
        font-size: 24px;
        letter-spacing: 12px;
        text-transform: uppercase;
    }
}

/* heading #4 */
.heading-4{
     .heading--title {
         font-size: 30px;
    }

}
 

@media only screen and (min-width: 320px) and (max-width: 767px) {
    .heading .heading--title {
        font-size: 30px;
    }
    .heading-2 .heading--title {
        font-size: 40px;
    }
    .heading-3 .heading--title {
        font-size: 20px;
        letter-spacing:8px;
    }
    .heading-4 .heading--title {
        font-size: 26px;
     }
}

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 768px) and (max-width :991px ) {
    .heading-2 {
        .heading--title {
            font-size:40px;
        }    
    }
}
