/* @group Contact
------------------------------------ */
.contact .content { color: var(--main-grey); }
.contact .content .article li a { font-size: unset; }
.contact .content .social { display: inline-flex; align-items: center; }
.contact .content .social .link { display: inline-block; margin-right: 1.7rem; }
.contact .content .social .link img { width: 2.6rem; height: 2.6rem; transition: all .3s linear; -webkit-transition: all .3s linear; -o-transition: all .3s linear; -moz-transition: all .3s linear; }
.contact .image { overflow: visible; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.16); }
@media only screen
and (min-width : 961px) {
    .contact { padding: 22.1rem 0 14.4rem; }

    .contact .content { flex: 0 1 65%; max-width: 65%; padding: 0 5rem 0 .25rem; }
    .contact .content h1 { margin: 0 0 2.3rem; }
    .contact .content .article { width: 50%; }
    .contact .content .article:not(:last-of-type) { margin: 0 0 2.3rem; }
    .contact .content .social { margin: 3.3rem 0 0; }
    .contact .content .social .link:hover img { opacity: .6; }

    .contact .image { flex: 0 1 35%; max-width: 35%; padding: 0; height: 49.9rem; }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .contact { padding: 7.5rem 0 2rem; }

    .contact .content,
    .contact .image { flex: 0 1 100%; max-width: 100%; }

    .contact .content h1 { font-size: 1.3em; margin: 0 0 1rem; }
    .contact .content p { font-size: 1.3em; margin: 0 0 .5rem; }
    .contact .content .article { margin: 0 0 1rem; }
    .contact .content .article li { font-size: 1.3em; margin: 0 0 .5rem; }
    .contact .content .social { margin: 2rem 0 0; }

    .contact .image { -ms-flex-order: -1; order: -1; height: 28.6rem; padding: 0; margin: 0 2rem 2rem; }
}

/* @end */


/* Animations */
.contact figure,
.contact article { opacity: 0; }

@media only screen
and (min-width : 961px) {
    .contact.animateActive article { animation: fade 1s 0.6s forwards; }
    .contact.animateActive figure { animation: fade 1.3s 1s forwards; }
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .contact.animateActive figure { animation: fade 1s 0.6s forwards; }
    .contact.animateActive article { animation: fade 1.3s 1s forwards; }
}