:root {
    --main-bg-color: gray;
    --color--footer-bg: #362D92;
    --color--footer-main-font: #fff;
    --color--footer-highlight-font: #f19d67;
    --size--font-small: 8px;
    --size--font-medium: 16px;
    --size--font-large: 28px;
  }

.page-wrapper {
    margin: 0;
    padding: 0;
    background-color: gray;
}

.rcom-footer {
    background-color: var(--color--footer-bg);
    color: var(--color--footer-main-font);
    font-family: Open Sans;
    padding: 30px;
}

.rcom-footer a {
    color: var(--color--footer-main-font);
    text-decoration: none;
}

.rcom-footer .contact-info-top {
    font-family: Noto Serif;
    font-style: normal;
    font-weight: 500;
    font-size: 28px;
    line-height: 36px;
    color: var(--color--footer-highlight-font);
}

.rcom-footer .contact-info-top__text hr {
    display: none;
}

.rcom-footer .contact-info-top__number {
    font-family: Open Sans;
    font-style: normal;
    font-weight: 300;
    font-size: 28px;
    line-height: 36px;
}

.rcom-footer .gr-contact-info-top-text      { grid-area: gr-contact-info-top-text; }
.rcom-footer .gr-contact-info-top-number    { grid-area: gr-contact-info-top-number; }
.rcom-footer .gr-products                   { grid-area: gr-products; }
.rcom-footer .gr-resources                  { grid-area: gr-resources; }
.rcom-footer .gr-support                    { grid-area: gr-support; }
.rcom-footer .gr-partnership                { grid-area: gr-partnership; }
.rcom-footer .gr-company-info               { grid-area: gr-company-info; }
.rcom-footer .gr-social-links               { grid-area: gr-social-links; }
.rcom-footer .gr-term-links                 { grid-area: gr-term-links; }
.rcom-footer .gr-copyright                  { grid-area: gr-copyright; }
.rcom-footer .gr-trademark                  { grid-area: gr-trademark; }
.rcom-footer .gr-contact-info-bottom        { grid-area: gr-contact-info-bottom; }

.rcom-footer.grid {
    display: grid;
    grid-template-areas:
        "gr-contact-info-top-text"
        "gr-contact-info-top-number"
        "gr-products"
        "gr-support"
        "gr-resources"
        "gr-partnership"
        "gr-company-info"
        "gr-social-links"
        "gr-term-links"
        "gr-copyright"
        "gr-trademark"
        "gr-contact-info-bottom";
    
        text-align: center;
}

.rcom-footer .nav-list {
    font-weight: bolder;
}

.rcom-footer .nav-list ul {
    list-style-type: none;
    margin: 0;
    padding-left: 20px;
    font-weight: normal;
    font-size: calc(var(--size--font-medium) - 2px);
    line-height: 25.2px;
}

.rcom-footer .nav-list a {
    text-transform: none;
}

.rcom-footer .nav-list.collapsed ul {
    display: none;
}

.rcom-footer hr {
    width: 95%;
}

.rcom-footer .nav-list {
    text-align: left;
    padding: 10px 20px;
}

.rcom-footer .font-small {
    font-size: var(--size--font-small);
    padding: 10px 20px;
}

.rcom-footer .social-links {
    margin-top: 40px;	
}

.rcom-footer .social-links header {
    display: none;
}

.rcom-footer .social-links img {
	width: 40px;
	margin-right: 20px;
}

.rcom-footer .term-links {
    display: flex;
    justify-content: space-evenly;
}

.rcom-footer .term-links .rcom-logo,
.rcom-footer .term-links .divider {
    display: none;
    padding-right: 10px;
}

.rcom-footer .term-links .divider {
    padding: 0 10px;
}

.rcom-footer .nav-list {
    position: relative;
}

.rcom-footer .nav-list::before {
    content: '\2014';
    position: absolute;
    right: 40px;
}
  
.rcom-footer .nav-list.collapsed::before {
    content: '\FF0B';
    position: absolute;
    right: 40px;
}

@media only screen and (min-width: 768px) {
    .rcom-footer.grid {
        display: grid;
        grid-template-areas:
            "gr-contact-info-top-text   gr-contact-info-top-text"
            "gr-contact-info-top-number gr-contact-info-top-number"
            "gr-products                gr-company-info"
            "gr-resources               gr-partnership"
            "gr-support                 gr-support"
            "gr-social-links            gr-social-links"
            "gr-term-links              gr-term-links"
            "gr-copyright               gr-copyright"
            "gr-trademark               gr-trademark"
            "gr-contact-info-bottom     gr-contact-info-bottom";

            grid-template-columns: 1fr 1fr;
    }
    
    .rcom-footer .term-links {
        padding: 10px 60px;
    }
}

@media only screen and (min-width: 992px) {
    .rcom-footer.grid {
        display: grid;
        grid-template-areas:
            "gr-contact-info-top-text   gr-contact-info-top-text    gr-contact-info-top-text    gr-contact-info-top-text      gr-contact-info-top-number"
            "gr-products                gr-support                gr-resources                  gr-partnership                  gr-social-links"
            "gr-products                gr-support                gr-resources                  gr-partnership                  gr-company-info"
            "gr-term-links              gr-term-links               gr-term-links               gr-term-links                   gr-term-links"
            "gr-copyright               gr-copyright                gr-copyright                gr-copyright                    gr-copyright"
            "gr-trademark               gr-trademark                gr-trademark                gr-trademark                    gr-trademark"
            "gr-contact-info-bottom     gr-contact-info-bottom      gr-contact-info-bottom      gr-contact-info-bottom          gr-contact-info-bottom";
    
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        text-align: left;
        padding-left: calc((100vw - 1140px)/2);
        padding-right: calc((100vw - 1140px)/2);
		margin: 0 auto;
    }

    .rcom-footer ul {
        display: block;
        margin: 0;
        padding: 0;
        list-style-type: none;
    }

    .rcom-footer .contact-info-top__text hr {
        display: block;
    }

    .rcom-footer .contact-info-top__text hr,
    .rcom-footer .contact-info-top__number hr {
        width: 100%;
        margin: 22px 0 21px;
		height: 0;
    }

    .rcom-footer .nav-list {
        text-transform: uppercase;
    }

    .rcom-footer .nav-list::before,
    .rcom-footer .nav-list.collapsed::before {
        content: "";
    }

    .rcom-footer .font-small.term-links {
        justify-content: flex-start;
        padding: 10px 20px;
    }

    .rcom-footer .social-links hr {
        display: none;
    }

    .rcom-footer .nav-list ul {
        padding-left: 0;
    }

    .rcom-footer .nav-list.collapsed ul {
        display: block;
    }

    .rcom-footer .term-links .rcom-logo,
    .rcom-footer .term-links .divider {
        display: block;
    }

    .rcom-footer .font-small {
        padding: 0px 20px;
        font-size: calc(var(--size--font-small) + 2px);
        margin-top: 5px;
    }

    .rcom-footer .nav-list {
        padding: 0;
    }

    .rcom-footer .nav-list.company-info {
        padding: 10px 0px;
        margin: 20px 0;
    }

    .rcom-footer .nav-list.products {
        padding-left: 20px;
    }

   	.rcom-footer .social-links {
    	margin-top: 0;
   	}

    .rcom-footer .social-links header {
        display: block;
        margin-bottom: 15px;
    }

    .rcom-footer .social-links header p {
        font-size: calc(var(--size--font-medium) - 2px);
        color: var(--color--footer-main-font);
    }
    
    .rcom-footer .social-links img {
		width: 24px;
		margin-right: 10px;
	}

    .rcom-footer .contact-info-top__text{
        padding-left: 20px;
    }

    .rcom-footer .contact-info-top__number {
        padding-right: 20px;
    }

    .rcom-footer .term-links {
        font-size: calc(var(--size--font-medium) - 2px);
    }
}