/*
**
**
**
**
**
**
**
**
** ======= CONTACT - COVER BANNER ===========================
** ==========================================================
*/

.frame.cover-banner{
    position:relative;
    margin:0;
    width:100%;height:288px;padding:0;
    background-color:#48484A;
}
.frame.cover-banner > figure.backdrop{
    position:absolute;z-index:0;
    top:0;left:0;
    margin:0;
    width:100%;height:100%;padding:0;
    background-color:transparent;
    background-image:url("native/resources/visual/photography/BG_1_0.jpg?v=5");background-repeat:no-repeat;background-size:cover;background-position:center;
}
.frame.cover-banner > figure.backdrop::before{
    content:'';
    position:absolute;
    bottom:42px;left:50%;
    width:10px;height:10px;
    background-color:#E8E8E8;
    -webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%; 
    -webkit-box-shadow:0 0 70px 64px rgba(255, 228, 255, 1);
	-moz-box-shadow:0 0 70px 64px rgba(255, 228, 255, 1);
	box-shadow:0 0 70px 64px rgba(255, 228, 255, 1);
    -webkit-animation:flicker 200ms linear alternate infinite;
    -moz-animation:flicker 200ms linear alternate infinite;
    -o-animation:flicker 200ms linear alternate infinite;
    animation:flicker 200ms linear alternate infinite;
}
.frame.cover-banner > .text-body{
    position:relative;z-index:1;
    top:128px;
    margin:0 auto;
    width:350px;height:auto;padding:0;
    text-align:center;
}
.frame.cover-banner > .text-body > h1{
    text-transform:uppercase;
    font-size:52px;color:#FFF;font-weight:700;letter-spacing:0.6px;line-height:60px;
}

/*
**
**
**
**
**
**
**
**
** ======= CONTACT - CONTACT OPTIONS FRAME ==================
** ==========================================================
*/

.frame.contact-wrapper{
    width:100%;padding:80px 0 160px 0;
    background-color:#F2F2F3;
}
.frame.contact-wrapper > .safe-zone{
    position:relative;
    margin:0 auto;
    width:92%;max-width:1200px;height:auto;padding:0;
}



.frame.contact-wrapper > .safe-zone > .contact-options{
    display:inline-block;
    position:relative;
    margin:0;
    vertical-align:top;
    width:370px;height:auto;padding:0;
}




/*==== OPTIONS FRAME - STATIC CONTACTS =============*/
/*==================================================*/

.frame.contact-wrapper > .safe-zone > .contact-options > .contact-info{
    display:inline-block;
    position:relative;
    margin:0 auto;
    vertical-align:top;
    width:100%;height:auto;padding:0;
    background-color:#FFF;
    -webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;
    -webkit-box-shadow:0 10px 26px -8px rgba(30, 31, 32, 0.18);
	-moz-box-shadow:0 10px 26px -8px rgba(30, 31, 32, 0.18);
	box-shadow:0 10px 26px -8px rgba(30, 31, 32, 0.18);
}
.frame.contact-wrapper > .safe-zone > .contact-options > .contact-info > .safe-zone{
    position:relative;
    margin:0 auto;
    width:88%;height:auto;padding:32px 0 42px 0;
    text-align:left;
}
.frame.contact-wrapper > .safe-zone > .contact-options > .contact-info > .safe-zone > .heading{
    padding:4px 0 0 32px;
    background-image:url("native/resources/visual/interface/pin_0_1.png?v=2");background-repeat:no-repeat;background-size:32px auto;background-position:0;
    font-size:26px;color:#000;font-weight:700;letter-spacing:0;line-height:28px;
}
.frame.contact-wrapper > .safe-zone > .contact-options > .contact-info > .safe-zone > .note{
    margin:12px 0 0 0;
    max-width:350px;
}
.frame.contact-wrapper > .safe-zone > .contact-options > .contact-info > .safe-zone > .note p{
    font-size:14px;color:#68686A;font-weight:400;letter-spacing:0.4px;line-height:20px;
}
.frame.contact-wrapper > .safe-zone > .contact-options > .contact-info > .safe-zone > .bullet{
    margin:18px 0 0 0;
}
.frame.contact-wrapper > .safe-zone > .contact-options > .contact-info > .safe-zone > .bullet > span.tag{
    font-size:14px;color:#68686A;font-weight:400;letter-spacing:0.2px;line-height:20px;
}
.frame.contact-wrapper > .safe-zone > .contact-options > .contact-info > .safe-zone > .bullet > span.data{
    font-size:18px;color:#000;font-weight:500;letter-spacing:0.1px;line-height:22px;
}
.frame.contact-wrapper > .safe-zone > .contact-options > .contact-info > .safe-zone > .bullet.address > span.data{
    font-size:16px;line-height:22px;letter-spacing:0;
}


/*==== OPTIONS FRAME - MESSAGE FORM ================*/
/*==================================================*/

.frame.contact-wrapper > .safe-zone > .contact-options > .message{
    display:inline-block;
    position:relative;
    margin:32px auto 0 auto;
    vertical-align:top;
    width:100%;height:auto;padding:32px 0;
    background-color:#FFF;
    -webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;
    -webkit-box-shadow:0 8px 28px -8px rgba(30, 30, 32, 0.22);
	-moz-box-shadow:0 8px 28px -8px rgba(30, 30, 32, 0.22);
	box-shadow:0 8px 28px -8px rgba(30, 30, 32, 0.22);
}
#contact-form{
    position:relative;
    margin:0;
    width:100%;height:auto;padding:0;
    background-color:transparent;
    text-align:left;
}
#contact-form > .safe-zone{
    position:relative;
    margin:0 auto;
    width:88%;max-width:338px;height:auto;padding:0;
}
#contact-form > .safe-zone > .heading{ 
    padding:2px 0 22px 12px;
    font-size:22px;color:#000;font-weight:700;letter-spacing:0;line-height:24px;
}
#contact-form .KUI-field-group{
    width:100%;min-width:260px;
    margin:0;
}
#contact-form .KUI-field label,
#contact-form .KUI-field .label{
    font-weight:500;
}
#contact-form .KUI-field label > span{
    color:#848486;font-weight:400;
}
#contact-form .KUI-field:not([data-type="price"]) input.field-input{
    padding-top:17px;
}
#contact-form .KUI-field-group.optional{
    margin:32px 0 0 0;
}
#contact-form button.send-message-btn{
    display:block;
    position:relative;
    margin:22px 0 0 calc(100% - 42px);
    width:42px;height:42px;padding:0;
    background-color:#D8651D;
    text-align:right;
    overflow:hidden;
    white-space:nowrap;
    -webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;
    -webkit-box-shadow:0 8px 24px -7px rgba(0, 0, 0, 0.42);
	-moz-box-shadow:0 8px 24px -7px rgba(0, 0, 0, 0.42);
	box-shadow:0 8px 24px -7px rgba(0, 0, 0, 0.42);
}
#contact-form button.send-message-btn > img{
    display:inline-block;
    vertical-align:top;
    width:16px;height:auto;padding:13px;
    -webkit-transform:translateX(-44px);
    -moz-transform:translateX(-44px);
    -ms-transform:translateX(-44px);
    -o-transform:translateX(-44px);
    transform:translateX(-44px);
    -webkit-transition:transform 260ms cubic-bezier(0.32, 0.22, 0.08, 1.42);
    -moz-transition:transform 260ms cubic-bezier(0.32, 0.22, 0.08, 1.42);
    -ms-transition:transform 260ms cubic-bezier(0.32, 0.22, 0.08, 1.42);
    -o-transition:transform 260ms cubic-bezier(0.32, 0.22, 0.08, 1.42);
    transition:transform 260ms cubic-bezier(0.32, 0.22, 0.08, 1.42);
}
#contact-form button.send-message-btn:hover > img{
    -webkit-transform:translateX(0);
    -moz-transform:translateX(0);
    -ms-transform:translateX(0);
    -o-transform:translateX(0);
    transform:translateX(0);
}

/*
**
**
**
**
**
**
**
**
** ======= CONTACT - MAP FRAME ==============================
** ==========================================================
*/

.map{
    display:inline-block;
    position:absolute;
    margin:0 0 0 5%;
    vertical-align:top;
    width:calc(95% - 370px);height:100%;
    background-color:#FFF;
    overflow:hidden;
    -webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;
    -webkit-box-shadow:0 8px 28px -8px rgba(30, 30, 32, 0.22);
	-moz-box-shadow:0 8px 28px -8px rgba(30, 30, 32, 0.22);
	box-shadow:0 8px 28px -8px rgba(30, 30, 32, 0.22);
}
#map{
    width:100%;height:100%;
}




/*
**
**
**
**
**
**
**
**
** ======= CONTACT - RESPONSIVE =============================
** ==========================================================
*/

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

    .frame.contact-wrapper > .safe-zone{
        max-width:800px;
    }
    .frame.contact-wrapper > .safe-zone > .contact-options{
        display:block;
        margin:0 auto;   
        width:100%;max-width:460px;
    }
    
    
    .map{
        display:block;
        position:relative;
        margin:50px auto 0 auto;
        width:100%;height:460px;
    }
    
    
}