/* CSS Document */
:root {
    --font-family: 'Roboto Condensed', sans-serif;
    --font-family-alt: 'Roboto Condensed', sans-serif;
    --font-size: 15px;
    --font-size-alt: 15px;
    --line-height: normal;
    /**********/
    --phone-padding: 12px;
    --tablet-padding: 18px;
    --block-padding: 24px;
    --centered-width: 1280px;
    /*COLOURS*/
    /*drk blue*/
    --color1: #2f4ba0;
    /*mid blue*/
    --color2: #57bdf5;
    /*lght grey*/
    --color3: #eeeeee;
    /*drk grey*/
    --color4: #242522;
    /**********/
    --black: #171717;
    --grey: #e6e5e4;
    --white: #ffffff;
    /**********/
    --text-color: var(--black);
    --link-color: var(--color1);
    /*FOOTER*/
    --footer-bg: var(--black);
    --footer-text-color: var(--white);
    --footer-link-color: var(--white);
    /*border*/
    --border-color: var(--color1);
    --border-size: 1px;
    /*HEADER*/
    --header-bg-position: fixed;
    --header-height: auto;
    --header-bg: rgba(0, 0, 0, 0.5);
    --header-bg-tint: rgba(0, 0, 0, 0.5);
    --header-logo-height: 120px;
    --header-logo-width: auto;
    --header-time: 0.3s;
    /*TOP NAV*/
    --top-nav-font-size: 16px;
    --top-nav-colour: #ffffff;
    --top-nav-hover-colour: var(--black);
    --top-nav-selected-colour: var(--black);
    --top-nav-font-weight: 600;
    --top-nav-drop-color: var(--color1);
    /*MOBILE NAV*/
    --mobile-nav-width: 375px;
    /*FORM*/
    --form-btn-padding: 8px 24px;
    --form-btn-bg-color: var(--color1);
    --form-btn-color: var(--white);
    --form-btn-font-size: 16px;
    --form-btn-radius: 20px;
    --form-border: none;
    /*HERO*/
    --hero-height: 540px;
    --hero-top: 115px;
    /*promo*/
    --promo-top: 200px;
    /*social icons*/
    --social-background-color: transparent;
    --social-width: auto;
    --social-height: auto;
    --social-padding-top: 0;
    --social-border-radius: 18px;
    --social-font-size: 20px;
    /*******/
    --p-font-family: var(--font-family);
    --p-size: 15px;
    --p-weight: 400;
    --p-margin-bottom: var(--block-padding);
    --strong-font-weight: 600;
    
    --h1-font-family: var(--font-family);
    --h1-size: 55px;
    --h1-margin-bottom: var(--block-padding);
    --h1-weight: 600;
    
    --h2-font-family: var(--font-family);
    --h2-size: 26px;
    --h2-margin-bottom: var(--block-padding);
    --h2-weight: 600;
    
    --h3-font-family: var(--font-family);
    --h3-size: 22px;
    --h3-margin-bottom: var(--block-padding);
    --h3-weight: 600;
    
    --h4-font-family: var(--font-family);
    --h4-size: 18px;
    --h4-margin-bottom: var(--block-padding);
    --h4-weight: 600;
}
/*******/