/**********************************************************

NEWSLETTER

 **********************************************************/

 .newsletter {
    background: var(--color-gray-light-x);
    padding-top: 8rem;
    position: relative;
    overflow: hidden;
    margin-top: -8rem;
    clear: both;
}

    .newsletter .newsletter-inside {
        overflow: hidden;
        padding: 9rem 0;
    }

        .newsletter .extra-panel {
            position: relative;
            z-index: 3;
        }

        .laptop .newsletter .extra-panel {
            padding: 0 30rem;
        }

            .newsletter h3 {
                font-size: 5rem;
                color: var(--color-red);
            }

            .laptop .newsletter h3 {
                font-size: 5rem;
            }

            .large .newsletter h3 {
                font-size: 7rem;
            }

            .newsletter p {
                font-size: 2.5rem;
                color: var(--color-gray-dark-x);
                font-family: 'pf_bague_sans_prolight';
            }

            .large .newsletter p {
                font-size: 3rem;
            }

        .newsletter svg#top-triangles-white {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%) scaleX(-1) rotate(180deg);
            height: 4rem;
            z-index: 3;
        }

        .laptop .newsletter svg#top-triangles-white {
            height: 8rem;
        }

            .newsletter svg#top-triangles-white path  {
                fill: var(--color-white);
                height: 8rem;
            }

            .newsletter svg#top-triangles-gray {
                position: absolute;
                top: 0;
                left: 50%;
                transform: translateX(-50%);
                height: 4rem;
                z-index: 1;
            }
    
            .laptop .newsletter svg#top-triangles-gray {
                height: 8rem;
            }
    
                .newsletter svg#top-triangles-gray path  {
                    fill: var(--color-gray-light-x);
                    height: 4rem;
                }
        
                .laptop .newsletter svg#top-triangles-gray path  {
                    height: 8rem;
                }
        
                .newsletter svg#splash-gray-x {
                    position: absolute;
                    top: -29rem;
                    left: -22rem;
                    height: 59.8rem;
                    z-index: 2;
                }
        
                    .newsletter svg#splash-gray-x path {
                        fill: var(--color-gray-light-xx);
                        height: 79.8rem;
                    }
        
                    .newsletter svg#x-red {
                        position: absolute;
                        top: 5.5rem;
                        left: 2.5rem;
                        height: 8rem;
                        width: 8rem;
                        transform: rotate(63deg);
                        z-index: 2;
                    }
            
                    .laptop .newsletter svg#x-red {
                        top: 12.5rem;
                        left: 10.5rem;
                    }
            
                        .newsletter svg#x-red g {
                            height: 6rem;
                        }
                
                        .newsletter svg#x-red path {
                            stroke: var(--color-red);
                            height: 6rem;
                        }
        
                    .newsletter svg#circle-red {
                        position: absolute;
                        top: 9rem;
                        right: 2.5rem;
                        height: 8rem;
                        width: 8rem;
                        transform: rotate(63deg);
                        z-index: 2;
                    }
            
                    .laptop .newsletter svg#circle-red {
                        top: 13rem;
                        right: auto;
                        left: 20.5rem;
                    }
            
                        .newsletter svg#circle-red circle {
                            height: 6rem;
                            stroke: var(--color-red);
                        }

                    .newsletter svg.dot-red {
                        position: absolute;
                        height: 2.1rem;
                        width: 2.1rem;
                        z-index: 2;
                    }
            
                        .newsletter svg.dot-red circle {
                            height: 2rem;
                            fill: var(--color-red);
                        }

                        .newsletter svg#dot-red-1 {
                            top: 10rem;
                            left: 22rem;
                        }

                        .newsletter svg#dot-red-2 {
                            top: 5rem;
                            left: 11rem;
                        }
                               
                        .laptop .newsletter svg#dot-red-2 {
                            top: 23rem;
                            left: 20rem;
                        }
                               
                .newsletter svg#splash-pink {
                    position: absolute;
                    bottom: -45rem;
                    right: -9rem;
                    height: 79.8rem;
                }
        
                    .newsletter svg#splash-pink path {
                        fill: var(--color-pink);
                        height: 59.8rem;
                    }

                .newsletter svg#zigzag-yellow {
                    position: absolute;
                    bottom: 9rem;
                    right: -2.5rem;
                    width: 27rem;
                    height: 5rem;
                }
                
                .laptop .newsletter svg#zigzag-yellow {
                    bottom: 10rem;
                }
                
                    .newsletter svg#zigzag-yellow polyline {
                        stroke: var(--color-yellow);
                        width: 27rem;
                        height: 5rem;
                    }
                
                        
/**********************************************************

    ███████╗ ██████╗  ██████╗ ████████╗███████╗██████╗
    ██╔════╝██╔═══██╗██╔═══██╗╚══██╔══╝██╔════╝██╔══██╗
    █████╗  ██║   ██║██║   ██║   ██║   █████╗  ██████╔╝
    ██╔══╝  ██║   ██║██║   ██║   ██║   ██╔══╝  ██╔══██╗
    ██║     ╚██████╔╝╚██████╔╝   ██║   ███████╗██║  ██║
    ╚═╝      ╚═════╝  ╚═════╝    ╚═╝   ╚══════╝╚═╝  ╚═╝

 **********************************************************/


footer {
    font-family: var(--font-sans-serif-bold);
	background: var(--color-blue-dark);
	color: var(--color-white);
}

footer h4 {
    font-family: var(--font-sans-serif-bold);
    color: var(--color-white);
    font-size: 1.6rem;
    padding-top: 2rem;
    padding-bottom: 1.3rem;
}

.laptop footer h4 {
    padding-top: 0;
}

.tablet footer .navigation {
    padding-top: 9.4rem;
}

    footer nav a {
        font-family: var(--font-sans-serif);
        color: var(--color-gray);
    }

    footer .footer-navigation a {
        font-family: var(--font-sans-serif-bold);
        color: var(--color-white);
        font-size: 1.6rem;
        line-height: 260%;
    }

    .laptop footer .footer-navigation a {
        line-height: 160%;
    }

    footer address {
        font-family: var(--font-sans-serif);
    }

        footer address a {
            color: var(--color-white);
        }

        footer address p {
            padding-bottom: 1.8rem;
            font-size: 1.4rem;
        }

footer nav .social a {
    color: var(--color-gray);
    font-size: 1.6rem;
    line-height: 140%;
}

.logo-footer img {
    width: 26rem;
    margin-bottom: 1.5rem;
}

.laptop .logo-footer img {
    margin-bottom: 4.5rem;
}

.credits {
    color: var(--color-gray);
    padding: calc( 0.6 * var(--vertical-rhythm) ) var(--grid-gutter);
    text-align: left;
}

.laptop .credits {
    text-align: center;
}

    .credits a {
        color: var(--color-gray);
    }

section.navigation ul {
    margin-bottom: 2.3rem;
}

    section.navigation ul li a {
        line-height: 100% !important;
        padding: 0.5rem 0 !important;
    }