body {
    margin: 0;
    font-family: 'Simplon Norm Normal', sans-serif;
    line-height: 20px;
    -webkit-font-smoothing: antialiased;
    font-size: 14px;
    color: #223344;
}

/* typography */

h1 {
    font-size: 25px;
    line-height: 27px;
    color: #ed6a61;
    margin: 20px 0;

}

h5 {
    font-size: 14px;
    line-height: 20px;
    color: #00748d;
    margin: 10px 0;
}

ul {
    list-style: none; /* Remove default bullets */
    color: #00748d;
    margin: 5px 0;
}

ul li::before {
    content: "\2022";
    color: #00748d;
    font-weight: bold;
    display: inline-block;
    width: 2.3em;
    margin-left: -2.3em;
}

a {
    text-decoration: none;
    color: #fff;
}

p {
    hyphens: auto;
    text-align: justify
}
/* main css */

main {
    max-width: 970px;
    margin: 20px auto;
}


header img {
    max-width: 100%;
}

article {
    width: 68%;
    margin-right: 2%;
    float:left
}

aside {
    width: 30%;
    float: right;
}

.sidebar {
    position: fixed;
}

aside p {
    max-width: 350px;
    margin-top: 20px;
}

footer {
    padding: 20px 0 20px 20px;
    width: 68%;
    position: fixed;
    bottom: 0;
    background: #fff;
    max-width: 660px;
}


/*specific css */

.content-left {
    padding: 0 20px;
}

.content-left-tasks, .content-left-profile  {
    margin-bottom: 50px;
}

.content-left-benefits {
    margin-bottom: 150px;
}

.content-left-benefits h5,
.content-left-benefits p {
    color: #00748d;
}

.footer-sign {
    max-height: 75px;
    margin-right: 40px;
}

.social-follow {
    float: right;
    margin-top: 25px;
}

.social-label {
    margin-right: 30px;
    color: #00748d;
}

.social-follow span i {
    margin-right: 15px;
    color: #00748d;
}

.sgl-icon {
    max-width: 180px;
    padding-left: 30px;
}

/* embeded youtube */

.video-container {
    position: relative;
    padding-bottom: 46.25%;
    padding-top: 37px;
    height: 0;
    overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-container-wrapper {
    max-width: 100%;
    left: 0;
    right:0;
    margin:auto;
}


/* button */

.apply-btn {
    padding: 10px 40px 10px 40px;
    display: table;
    color: #fff;
    background-color: #00748d;
    margin-top: 50px;
}


.apply-btn:after {
    content: "\276F";
    margin: 0 0 0 15px
}




/* SGL */

[class~="sgl"] .sgl-icon {
    max-height: 100px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 34px 0;
}



/* responsive */

@media screen and (max-width: 768px) {

    main {
        margin: 0;
    }
    article {
        width: 100%;
    }

    aside {
        width: 90%;
        float: left;
        padding: 0 20px;
    }

    aside p {
        max-width: 100%;
    }
    .sidebar {
        position: initial;
    }

    [class~="brembo"] .sgl-icon {
        max-width: 85px
    }

    .content-left-benefits {
        margin-bottom: 30px;
    }

    footer {
        position: initial;
        width: 90%;
    }

    .apply-btn {
        margin-bottom: 50px;
    }

    .social-follow {
        margin-right: 20px;
        margin-bottom: 20px;
    }
    [class~="sgl"] .sgl-icon {
        max-height: 70px;
        display: block;
        margin-left: unset;
        margin-right: unset;
        padding: 10px 0;
    }

}



/* brembo colors */

[class~="brembo"] h1 {
    color: #E43038;
}

[class~="brembo"] h5,
[class~="brembo"] p,
[class~="brembo"] ul,
[class~="brembo"] ul li::before{
    color: #223344;
}

[class~="brembo"] aside p {
    margin-top: 76px;
}

[class~="brembo"] .sgl-icon {
    max-width: 100%;
    max-height: 60px;
    padding-left: 0;
}

[class~="brembo"] .apply-btn {
    background-color: #E43038
}

@media screen and (max-width: 768px) {
    [class~="brembo"] aside p {
        margin-top: 20px;
    }
}