﻿/*
    Header Font:        Cormorant Garamond | Headers  400, 500, 600, 700    
    Lora:               secondary
    Poppins:            body font | 300, 400
    New Teen Script:    Cursive

    font-family: "Lora", serif;     
    font-family: "Cormorant Garamond", serif;
    font-family: "Poppins", sans-serif;

    Colors
    Primary             #294160  rgba(41,65,96,1)
    Secondary           #C2A072  rgba(194,160,114,1)
    Accent One          #A16D47  rgba(161,109,71,1)
    Accent Two          #E1AD48  rgba(225,173,72,1) // Foil  DO NOT USE this is a print only color
    Background          #F7F3EB  rgba(247,243,235,1)

    //old colors
    dark blue           #092633
    tan                 #B38C6C
*/

:root {
    /*colors*/
    --primary: #294160;
    --primaryRGB: 41,65,96;
    --primaryADA: #22364F;
    --background: #F7F3EB;
    --backgroundRGB: 247,243,235;
    --secondary: #C2A072;
    --secondaryRGB: 194,160,114;
    --accentOne: #A16D47;
    --accentOneRGB: 161,109,71;
    --accentTwo: #A16D47; /* Changed to match accentOne - foil is not suppose to be used but for print only  */
    --accentTwoRGB: 161,109,71;
    --accentLine: rgba(0, 0, 0, 0.2);
    --bodyTextColor: #2f4d75;
    /*fonts*/
    --primaryFont: "Lora", serif;
    --headerFont: "Cormorant Garamond", serif;
    --subHeaderFont: "Lora", serif;
    --bodyFont: "Poppins", sans-serif;
    /*elements*/
    --radiusSmall: 7px;
    --sectionPadding: 2rem 1rem;
    --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
}

/*#region keyframes*/
@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-o-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-ms-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade-in-move-down {
    0% {
        opacity: 0;
        transform: translateY(-3rem);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-in-move-up {
    0% {
        opacity: 0;
        transform: translateY(3rem);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-in-move-right {
    0% {
        opacity: 0;
        transform: translateX(-3rem);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
/*#endregion*/

body {
    margin: 0;
    padding: 0;
    background: #FFF;
    font-family: var(--primaryFont);
    font-weight: 400;
    line-height: 1.5;
    color: var(--primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-optical-sizing: auto;
}

.fontBody {
    font-family: var(--primaryFont);
    font-family: var(--bodyFont);
    font-weight:300;
}
.fontHeader {
    font-family: var(--headerFont);
}
.fontSubHeader {
    font-family: var(--subHeaderFont);
}
.colorPrimary {
    color:var(--primary);
}
.colorSecondary {
    color: var(--secondary);
}
.colorWhite {
    color:var(--background);
}
.goldText {
    color: var(--accentOne);
}


    .fade-in-text {
        animation: fadeIn linear 2s;
        -webkit-animation: fadeIn linear 2s;
        -moz-animation: fadeIn linear 2s;
        -o-animation: fadeIn linear 2s;
        -ms-animation: fadeIn linear 2s;
    }

.fade-in-move-down {
    animation: fade-in-move-down linear .5s;
    -webkit-animation: fade-in-move-down linear .5s;
    -moz-animation: fade-in-move-down linear .5s;
    -o-animation: fade-in-move-down linear .5s;
    -ms-animation: fade-in-move-down linear .5s;
}

.fade-in-move-up {
    animation: fade-in-move-up linear .5s;
    -webkit-animation: fade-in-move-up linear .5s;
    -moz-animation: fade-in-move-up linear .5s;
    -o-animation: fade-in-move-up linear .5s;
    -ms-animation: fade-in-move-up linear .5s;
}

/*#region reveal*/
.revealCustom {
    position: relative;
    transform: translateY(150px);
    opacity: 0;
    transition: .75s all ease;
}
.revealCustom.active {
    transform: translateY(0);
    opacity: 1;
}
/*#endregion*/

