#contact{}

#contact .banner {width:100%;height:50rem;background:#ea7473 url("../images/page-contact-banner.jpg") center center no-repeat;background-size:cover;overflow:hidden;}
#contact .banner .container{position:relative;height:100%;}
#contact .banner .container .text{position:absolute;top:50%;left:0;transform:translateY(-50%);}
#contact .banner .container .text .title{font-size:3rem;color:#fff;}
#contact .banner .container .text .slogan{margin-top:1rem;width:100%;font-size:1.5rem;color:#fff;}
#contact .banner .container .image{position:absolute;top:50%;right:0;transform:translateY(-50%);}
#contact .banner .container .image img{width:37.5rem;}


#contact .content{}
#contact .content .information{padding:5rem 0;width:100%;}
#contact .content .information .company{}
#contact .content .information .company p{line-height:3rem;}
#contact .content .information .company p.name{font-size:2rem;}
#contact .content .information .map{}
#contact .content .message{position:relative;width:100%;height:40rem;background:url("../images/page-contact-form.jpg") center center no-repeat;background-size:cover;overflow:hidden;}
#contact .content .message .container{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);padding:5rem 0;background-color:rgba(234,116,115,0.9);border-radius:2rem;}
#contact .content .message .container .qrcode{float:left;width:50%;padding:0 10rem;border-right:1px solid #e16160;text-align:center;box-sizing:border-box;}
#contact .content .message .container .qrcode p{margin-top:1rem;}
#contact .content .message .container .qrcode p:first-child{margin-top:0;}
#contact .content .message .container .guestbook{float:right;width:50%;padding:0 10rem;border-left:1px solid #e16160;box-sizing:border-box;}
#contact .content .message .container .guestbook h3{margin-bottom:2rem;text-align:center;color:#fff;}

@media (max-width:768px){
    #contact .banner {height:20rem;}
    #contact .banner .container .text{width:100%;text-align:center;}
    #contact .banner .container .text .title{font-size:1.5rem;}
    #contact .banner .container .text .slogan{margin-top:0.5rem;font-size:1.25rem;}

    #contact .content .information{padding:3rem 0;}
    #contact .content .information .company p{line-height:2.5rem;}
    #contact .content .information .company p.name{font-size:1.5rem;}
    #contact .content .message{position:relative;width:100%;height:auto;background:url("../images/page-contact-form.jpg") center center no-repeat;background-size:cover;overflow:hidden;}
    #contact .content .message .container{position:unset;top:unset;left:unset;transform:unset;padding:2rem 0;border-radius:0;}
    #contact .content .message .container .qrcode{float:unset;width:100%;padding:0;}
    #contact .content .message .container .qrcode p{margin-top:0.5rem;}
    #contact .content .message .container .qrcode p:first-child{margin-top:0;}
    #contact .content .message .container .guestbook{margin-top:2rem;float:unset;width:100%;padding:0 0.75rem;}
    #contact .content .message .container .guestbook h3{margin-bottom:1rem;}
    #contact .content .message .container .guestbook form .row{width:100%;text-align:center;background-color:#0a53be;}
}