:root{
    --primary-color-text: gainsboro;
    --primary-color-bg: rgb(243, 242, 242);
    --secondary-color-bg: #005266ca;
}
html, body {
  margin: 0;
  padding: 0;
}
#banner{
    width: 100%;
    height: 400px;
    margin: 0 !important;
    padding: 0 !important;
    background-image: url("images/bg_01.png");
    background-size: cover;
    background-position: center;
    .row{
        margin-left: 0;
        margin-right: 0;
    }
    h1, p{
        color: var(--primary-color-text);
        text-transform: uppercase;
    }
    p{
        margin: 0 120px;
        font-family: "Open Sans";
        font-size: 18px;
    }
    h1{
        margin: 40px 120px;
        font-size: 60px;
        font-weight: bold; 
        font-family: "Roboto Flex";
    }
}
.container{
    h2, h3{
        /*text-align: center;*/
        font-family: "Open Sans";
        color: var(--secondary-color-bg);
        margin: 30px 0;
    }
    div{
        p{
            font-family: 'Roboto Flex';
            span{
                font-weight: bold;
            }
        } 
    }
}
footer.my-footer{
    height: auto;
    margin-top: 50px;
    background-color: #002d3c;
    .copy{
        padding-top: 50px;
        text-align: center;
        h3{
            color: var(--primary-color-text);
        }
        .link{
            padding: 20px 0;
            a{
                color: var(--primary-color-text);
                i{
                    font-size: 30px;
                }
                &:hover{
                    color: var(--secondary-color-bg);
                }
            }
        }
    }
    p{
        margin-top: 25px;
        color: var(--primary-color-text);
        a{
            color: var(--primary-color-text);
            text-decoration: none;
            &:hover{
                    color: var(--secondary-color-bg);
            }
        }
    }
    img{
        width: 100px;
    }
}