/**
 * cores primary, secondary, tertiary definidas em lpcosmetica.css pelo style switcher
 * primary: #aad7ff
 * primary pd: #C7C7C7
 * primary pd-2: #C7C7C7
 * secondary: #fd699e
 * secondary pd: #7C7C7C
 * secondary pd-2: #CBBD7D
 * terciary: #898de7
 * terciary pd-2: #877009
 * quaternary (está default): #383f48
 */

/** declaração fontes */
body {
    font-family: "Roboto", sans-serif;
    /*color: #7C7C7C;*/
}

h1, h2, h3 {
    font-style: normal;
    font-weight: normal;

    letter-spacing: normal;
    line-height: 100%;
    text-transform: none;
}

h1 {
    font-family: "Volkhov", serif;
    color: #656565;
}

h2, h3 {
    font-family: "Vollkorn", serif;
    color: #7C7C7C;
}

h4 {
    font-family: "Roboto", sans-serif;
    font-style: normal;
    font-weight: bold;
    color: #7C7C7C;

    letter-spacing: normal;
    line-height: 100%;
    text-transform: none;
}

p {
    font-family: "Open Sans", sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #7C7C7C;

    letter-spacing: normal;
    line-height: 100%;
    text-transform: none;
}

/**1! outros elementos não especificados */
h5, h6 {
    font-family: "Roboto", sans-serif;
    font-style: normal;
    font-weight: bold;
    color: #7C7C7C;

    line-height: 100%;
    text-transform: none;
}

/* incluir os outros elementos parecidos com p na mesma fonte? ou deixar a declaração body ativa nesses? */
a, /*span,*/ li, input {
    font-family: "Open Sans", sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #7C7C7C;
    line-height: 100%;
}

/*
span {
    font-family: "Roboto", sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #7C7C7C;
    line-height: 100%;
    font-size: 18px;
}
*/

label {
    font-family: "Volkhov", serif;
    font-style: normal;
    font-weight: normal;
    color: #656565;
    line-height: 100%;
    font-size: 16px;
}

.form-control {
    font-family: "Volkhov", serif;
    font-style: normal;
    font-weight: normal;
    color: #7C7C7C;
    line-height: 100%;
    font-size: 16px;

    border: 2px solid #C7C7C7;
}

.form-control:not(.form-control-sm):not(.form-control-lg) {
    font-size: 16px;
    line-height: 100%;
}

.p-label {
    font-family: "Volkhov", serif;
    font-style: normal;
    font-weight: normal;
    color: #7C7C7C;
    line-height: 100%;
    font-size: 16px;
    margin: 0;
}
.p-span {
    font-family: "Roboto", sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #7C7C7C;
    line-height: 100%;
    font-size: 18px;
}
.p-hint, .p-hint.form-control, .p-hint.form-control:not(.form-control-sm):not(.form-control-lg) {
    font-family: "Open Sans", sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #7C7C7C;
    line-height: 100%;
    font-size: 14px;
}
.a-underlined {
    font-family: "Volkhov", serif;
    font-style: normal;
    font-weight: normal;
    line-height: 100%;
    font-size: 16px;
    text-decoration: underline;
}
.a-nav-link {
    font-family: "Roboto", sans-serif;
    font-style: normal;
    font-weight: bold;
    color: #7C7C7C;
    line-height: 100%;
    font-size: 14px;
}
.a-product {
    font-family: "Roboto", sans-serif;
    font-style: normal;
    font-weight: bold;
    color: #7C7C7C;
    line-height: 100%;
    font-size: 16px;
}
.p-price {
    font-family: "Roboto", sans-serif;
    font-style: normal;
    font-weight: bold;
    color: #656565;
    line-height: 100%;
    font-size: 24px;
}
/**1! */

h1 {
    font-size: 96px;
}

h2 {
    font-size: 72px;
}

h3 {
    font-size: 32px;
}

h4 {
    font-size: 24px;
    /*line-height: 28px;*/
}

p {
    font-size: 18px;
}

@media (max-width: 767px) {
	h1 {
        font-size: 72px;
    }
    
    h2 {
        font-size: 48px;
    }
    
    h3 {
        font-size: 24px;
    }
    
    h4 {
        font-size: 16px;
        /*line-height: 19px;*/
    }
    
    p {
        font-size: 18px;
    }
}