/* ==========================================
   S&S RANCH CONTACT PAGE
   PART 1 - GLOBAL LAYOUT
========================================== */

html,
body{
    margin:0;
    padding:0;
    background:#050505;
    overflow-x:hidden;
    font-family:Georgia, serif;
}

.page-wrapper{
    position:relative;
    width:100%;
    max-width:2048px;
    margin:0 auto;
}

.panel{
    width:100%;
}

.panel img{
    display:block;
    width:100%;
    height:auto;
}

/* ------------------------------------------
   CLICKABLE AREAS
------------------------------------------ */
.clickable{
    position:absolute;
    display:block;
    z-index:9999;

    background:Transparent;
    border:None;

    cursor:pointer;
}

/* ==========================================
   TOP NAVIGATION HOTSPOTS
========================================== */

.logo-link{
    top:0.8%;
    left:3.7%;
    width:23%;
    height:7%;
}

.home-link{
    top:1.8%;
    left:31%;
    width:5%;
    height:1.8%;
}

.story-link{
    top:1.8%;
    left:38.5%;
    width:7%;
    height:1.8%;
}

.boarding-link{
    top:1.8%;
    left:48%;
    width:7%;
    height:1.8%;
}

.trails-link{
    top:1.8%;
    left:57%;
    width:5%;
    height:1.8%;
}

.gallery-link{
    top:1.8%;
    left:64%;
    width:6%;
    height:1.8%;
}

.contact-link{
    top:1.8%;
    left:72.7%;
    width:6%;
    height:1.8%;
}

.top-apply{
    top:1.6%;
    left:81%;
    width:17%;
    height:2.5%;
}

/* ==========================================
   HERO BUTTONS
========================================== */

.hero-visit{
    top:23.5%;
    left:4.5%;
    width:21%;
    height:2.5%;
}

.hero-apply{
    top:23.5%;
    left:26.5%;
    width:22%;
    height:2.5%;
}

.visit-ranch{
    top:36%;
    left:61%;
    width:20%;
    height:2.1%;
}

.send-message{
    top:77.6%;
    left:57%;
    width:20%;
    height:2.2%;
}
/* ==========================================
   FOOTER BUTTONS
========================================== */

.footer-apply{
    left:60.9%;
    top:84%;
    width:16%;
    height:1.9%;
}

.footer-visit{
    left:60.9%;
    top:86.8%;
    width:16%;
    height:1.9%;
}

.footer-email{
    left:40%;
    top:96.0%;
    width:12.5%;
    height:1.0%;
}

.footer-phone{
    left:58.6%;
    top:93.2%;
    width:11.5%;
    height:1.0%;
}

.footer-address{
    left:37.5%;
    top:93.0%;
    width:16%;
    height:2.0%;
}

.footer-facebook{
    left:85.8%;
    top:95.3%;
    width:2.2%;
    height:1.5%;
}

.footer-instagram{
    left:90.4%;
    top:95.3%;
    width:2.2%;
    height:1.5%;
}

/* ==========================================
   DEBUG MODE
   (Turn OFF before launch)
========================================== */

.clickable{
      background:Transparent;
    border:none;
}
/* ==========================================
   MOBILE RESPONSIVE
========================================== */

@media (max-width:1200px){

    .page-wrapper{
        width:100%;
    }

    .clickable{
        min-width:24px;
        min-height:24px;
    }

}

@media (max-width:768px){

    .page-wrapper{
        width:100%;
    }

}
/* ==========================================
   CONTACT PAGE IMAGE CONTAINER
========================================== */

.contact-page{
    width:100%;
}

.contact-page img{
    display:block;
    width:100%;
    height:auto;
}
/* CONTACT FORM OVERLAY */

.contact-form-overlay{

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:100%;

      z-index:10000;

    pointer-events:none;
}

.contact-form-overlay input{

    position:absolute;

    pointer-events:auto;

    background:transparent;

    border:none;

    outline:none;

    color:#2f2216;

    font-size:12px;

    font-family:Georgia, serif;
}

.cf-name{

    left:43.2%;

    top:62%;

    width:23%;

    height:1.6%;
}
/* ===================================================
   CONTACT FORM DEBUG OVERLAYS
=================================================== */

.cf-name,
.cf-email,
.cf-phone,
.cf-horse,
.cf-horses,
.cf-message,
.cf-send{


   z-index:10001;

    position:absolute;

    background:transparent;

    border:none;

    box-sizing:border-box;

    pointer-events:auto;

    font-family:Georgia, serif;

    font-size:14px;
}

/* Full Name */

.cf-name{

    left:43.5%;
    top:63%;

    width:23.7%;
    height:1.7%;
}

/* Email */

.cf-email{

    left:68.7%;
    top:63%;

    width:25.3%;
    height:1.7%;
}

/* Phone */

.cf-phone{

    left:43.4%;
    top:66.5%;

    width:23.6%;
    height:1.6%;
}

/* Horse */

.cf-horse{

    left:69.5%;
    top:66.5%;

    width:25.4%;
    height:1.7%;
}

/* Interest */

.cf-interest{

    left:43.7%;
    top:69.9%;

    width:50.2%;
    height:1.5%;
}

/* Message */

.cf-message{

    left:43.2%;
    top:73.2%;

    width:50.6%;
    height:3.9%;
}

/* Send Button */

.cf-send{

    left:78.2%;
    top:87.6%;

    width:18.5%;
    height:1.2%;
}
/* Number of Horses */

.cf-horses{

    position:absolute;

    left:43.7%;
    top:70%;

    width:50.2%;
    height:1.5%;

    background:transparent;

    border:none;

    outline:none;

    pointer-events:auto;

    box-sizing:border-box;

    font-family:Georgia, serif;

    font-size:14px;

    color:#2b1b12;

    padding-left:18px;
    padding-top:0;

    caret-color:#2b1b12;
}