#container {
    background-color: #9E2B46;
    color: #FFF;
}
@media (min-width : 500px) { #container { padding: 190px 60px 60px; } }
@media (max-width : 499px) { #container { padding: 125px 15px 45px; } }

/*---------------------------------------------------------------------------------------------------------------*/

#container > .title {
    text-transform: uppercase;
    font-family: "Anton";
}
#container > .title > span {
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #FFF;
}
@media (min-width : 500px) {
    #container > .title {
        font-size: 77px;
        line-height: 66px;
    }
    #container > .title:not(:last-child) { margin-bottom: 90px; }
}
@media (max-width : 499px) {
    #container > .title {
        line-height: 43px;
        font-size: 50px;
    }
    #container > .title:not(:last-child) { margin-bottom: 65px; }
}

/*---------------------------------------------------------------------------------------------------------------*/

#contact > div { border: solid 1px #FFF; }
#contact > .info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
#contact > .info > * {
    position: relative;
    display: block;
}
#contact > .info > *:before {
    content: "";
    position: absolute; top: 11px; left: -30px; transform: translateY(-50%);
    display: block;
    
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
#contact > .info > .address:before { background-image: url("../../images/icons/contact/location.svg"); }
#contact > .info > .email:before   { background-image: url("../../images/icons/contact/mail.svg"); }
#contact > .info > .phone:before   { background-image: url("../../images/icons/contact/phone.svg"); }
#contact > .info > .fax:before     { background-image: url("../../images/icons/contact/fax.svg"); }
#contact > .info > .metro:before   { background-image: url("../../images/icons/contact/metro.svg"); }
#contact > .info > .rer:before     { background-image: url("../../images/icons/contact/rer.svg"); }
#contact > .info > .bus:before     { background-image: url("../../images/icons/contact/bus.svg"); }
#contact > .info > .linkedin {
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 3px;
    color: #FEFD71;
}
#contact > .info > .linkedin:after { background-color: #FEFD71; }

#contact > .map {
    position: relative;
    min-height: 400px;
    
    background-size: cover;
    background-position: center;
}
#contact > .map > iframe {
    position: absolute; top: 0; left: 0;
    display: block; height: 100%; width: 100%;
}

@media (min-width : 900px) {
    #contact {
        display: flex;
        flex-direction: row;
        align-items: stretch;
    }
    #contact > div { flex: 0 0 calc((100% + 1px) / 2); }
    #contact > div:not(:first-child) { margin-left: -1px; }
    #contact > .info {
        padding: 55px 35px 55px 70px;
        font-size: 17px;
    }
    #contact > .info > *:before { height: 20px; width: 20px; }
    #contact > .info > .address  { margin-bottom: 14px; }
    #contact > .info > .email    { margin-bottom: 14px; }
    #contact > .info > .phone    { margin-bottom: 14px; }
    #contact > .info > .fax      { margin-bottom: 44px; }
    #contact > .info > .metro    { margin-bottom: 20px; }
    #contact > .info > .metro > .line:not(:last-child) { margin-bottom: 4px; }
    #contact > .info > .rer      { margin-bottom: 20px; }
    #contact > .info > .rer > .line:not(:last-child) { margin-bottom: 4px; }
    #contact > .info > .bus      { margin-bottom: 45px; }
}
@media (max-width : 899px) {
    #contact {}
    #contact > div:not(:first-child) { margin-top: -1px; }
    #contact > .info {
        padding: 35px 30px 35px 45px;
        font-size: 16px;
    }
    #contact > .info > *:before { height: 18px; width: 18px; }
    #contact > .info > .address  { margin-bottom: 10px; }
    #contact > .info > .email    { margin-bottom: 10px; }
    #contact > .info > .phone    { margin-bottom: 10px; }
    #contact > .info > .fax      { margin-bottom: 24px; }
    #contact > .info > .metro    { margin-bottom: 24px; }
    #contact > .info > .metro > .line:not(:last-child) { margin-bottom: 5px; }
    #contact > .info > .rer      { margin-bottom: 24px; }
    #contact > .info > .rer > .line:not(:last-child) { margin-bottom: 5px; }
    #contact > .info > .bus      { margin-bottom: 34px; }
}