*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
body, html{
    font-family: 'Ubuntu', sans-serif;
    height:100%;
}
i{
    cursor: pointer;
}
.bg{
    height:100%;
    background-image: url("../images/bg.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.1;
}
.wrapper {
    position:absolute;
    top:1.25rem;
    left:1.25rem;
    bottom:1.25rem;
    right:1.25rem;
    border:1px solid #000;
}
.content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    letter-spacing: 1px;
    text-transform: uppercase;
}
.content p {
    border-bottom:1px solid #000;
    margin-bottom:2rem;
    padding-bottom:1rem;
    text-align: center;
}
svg {
    width:480px
}
@media (max-width: 566px) {
    svg {
        width:100%
    }
}
.flex-container {
    display:flex;
}
.intro-line {
    width: 100%;
    height: 1px;
    background: #000;
    margin-top: 2rem;
    display: inline-block;
}
.intro-text {
    display: inline-block;
    width: 100%;
    text-align: center;
    padding-top: 1.4rem;
}
@media (max-width: 566px) {
    .intro-text {
        padding-top: 1rem;
    }
}
.contact {
    position:absolute;
    bottom: 1.25rem;
    text-align: center;
    width:100%;
    font-size: 2rem;
}
.modal {
    position:absolute;
    width:100%;
    height:50%;
    bottom:0;
    background:#fff;
    visibility: hidden;
    transition: height .3s;
}
.modal.active {
    height: 100%;
    visibility: visible;
}
.close {
    position:absolute;
    top: 1.25rem;
    text-align: center;
    width:100%;
    font-size: 2rem;
}
.modal p {
    text-transform: none;
    border:none;
}
.info{
    display: block;
    text-align: center;
    margin:2rem;
    max-width: 280px;
}
.info i {
    margin-bottom:1rem;
    font-size: 1.5rem;
}
.info a{
    text-decoration: none;
    color:#000;
}