/* Search div */
#topsearch {
  /* critical sizing and position styles */
  width: 100%;
  height: 250px;
  position: fixed;
  top: -250px;
  left: 0;
  z-index: 3;
  transition: all 0.2s ease;

  /* non-critical appearance styles */
  list-style: none;
  background-color:#e2e2e2;
  /*background-color: #829aac;*/
}

/* Search Trigger */
.search-trigger, .navsearch-trigger {
  /* critical styles - hide the checkbox input */
  position: fixed;
  clip: rect(0, 0, 0, 0);
}

label[for="search-trigger"] {
  /* critical positioning styles */
  position: fixed;
  right: 115px;
  top: 30px;
  z-index: 4;
  
  /* non-critical apperance styles */
  height: 30px;
  width: 30px;
  cursor: pointer;
  background-image: url('../images/search.png');
  background-repeat: no-repeat;
  /*
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='30px' height='30px' viewBox='0 0 30 30' enable-background='new 0 0 30 30' xml:space='preserve'><rect width='30' height='6'/><rect y='24' width='30' height='6'/><rect y='12' width='30' height='6'/></svg>");
  */
  background-size: contain;
}

/* Make the Magic Happen */
.search-trigger + label, .site-wrap {
  transition: all 0.2s ease;
}

nav {
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.search-trigger ~ label[for="search-trigger"] {
  top: 30px;
  transition: all 0.2s ease;
}
.search-trigger ~ .navigation {
  top: 0px;
  transition: top 0.2s ease;
}
.search-trigger:checked ~ label[for="search-trigger"] {
  top: 280px;
}
.search-trigger:checked ~ label[for="search-trigger"].shrink {
  top: 271px;
}
.navsearch-trigger ~ label[for="search-trigger"] {
  right: 115px;
}
.navsearch-trigger:checked ~ label[for="search-trigger"] {
  right: 415px;
}

.search-trigger:checked ~ #topsearch {
    top:0;
}

.search-trigger:checked ~ .site-wrap, .search-trigger:checked ~ .navigation, .search-trigger:checked ~ nav, .search-trigger:checked ~ nav.shrink {
  top: 250px;
}

.search-trigger:checked ~ .site-wrap nav, .search-trigger:checked ~ .site-wrap nav.shrink {
  top: 250px;
}

.search-trigger:checked ~ label[for="nav-trigger"] {
  top: 281px;
}
.search-trigger:checked ~ label[for="nav-trigger"].shrink {
  top: 272px;
}


/* SHRINK STYLES */
label[for="search-trigger"].shrink {
    top:21px;
}

@media (max-width: 510px) {
    label[for="search-trigger"].shrink {
        right:80px;
    }
    .navsearch-trigger:checked ~ label[for="search-trigger"] {
      right: 380px;
    }
}


/* SEARCH FORM STYLES */

#topsearch { float:none; margin:0px auto 0 auto; }
#topsearch .searchcontainer {/*padding:60px 100px 0px 100px;*/ padding:60px 35px 0px 35px; position:relative;}
#topsearch .searchheading h1 {color:#b3c3ce;margin-bottom:15px;}
#topsearch .searchcontent { /* background-image:url(../images/search-bkg.png); */ padding:0px; margin:0 0px 0 0px; clear:both; }
#topsearch .formfield {margin-bottom:15px;}
#topsearch .glyphicon { color:#313131; }
#topsearch .glyphicon-search { font-size:1.8rem; padding-right:10px; }
#topsearch .searchtop { height:56px; padding:0; margin:0 20px 10px 20px; /* background-image:url(../images/logo-squares.png); */ background-position:top right; background-repeat:no-repeat; }
#topsearch .searchtop .btn-default { float:right; color:#FFFFFF; background-color:#465f74; text-transform:uppercase; border:0; border-radius:0; margin-left:5%; min-width:97px; font-size:.9rem; line-height:1.3rem; }
#topsearch .searchtop .btn-default:hover, #homesearch .searchtop .curr { color:#FFFFFF; background-color:#313131; }
#topsearch .searchtop .btn-default:last-child { margin-right:0; }
#topsearch #searchheading { font-size:2.0em; color:#313131; font-weight:bold; float:left; margin-top:30px; width:35%; letter-spacing:-1px; }
#topsearch #searchbuttons { float:right; margin-top:24px; width:65%; } 
#topsearch .locationcontainer input { width:100%; padding:14px; border-radius:0px; border-width:0px; font-size:1.2rem; height:54px; }
#topsearch #propind { min-width:80px; }
#topsearch .bedscontainer { }
#topsearch .bedscontainer select { height:54px; }
#topsearch .pricecontainer { /*min-width:360px;*/ }
#topsearch .pricecontainer .formelement { }
#topsearch .pricecontainer #MinPrice, #topsearch .pricecontainer #MaxPrice { max-width:45%; float:left; height:54px; }
#topsearch .pricecontainer .pricesep { float:left; line-height:3.7rem; width:10%; text-align:center; color:#313131; font-size:1.2rem; font-weight:500; }
#topsearch .buttondiv { opacity:1; padding-top:35px; }
#topsearch .buttondiv input[type=submit] { border:0; border-radius:0; background-color:#313131; font-size:1.8rem; font-weight:500; height:54px; line-height:54px; }
#topsearch .formheading { display:block; color:#313131; font-size:1.4rem; line-height:2.2rem; font-weight:500; }
#topsearch .formelement { }
#topsearch .formsep { clear:both; height:0px; line-height:0px; padding:0; margin:0; }
#topsearch .clearboth { clear:both; line-height:0; padding:0; margin:0; height:0; }

select:disabled, select:disabled option { background-color:#c8d6df; color:#98b0be; }

a.closesearch {
    position:absolute;
    z-index:999;
    top:0;
    right:0;
    margin-right:25px;
    display:block;
    padding: 2.1rem;
    padding-left: 55px;
    background-image:url('../images/closemenu.png');
    background-repeat:no-repeat;
    background-size:15px;
    background-position:30px 37px;
    color:#777777;
    font-size:1.4rem;
    text-transform: uppercase;
    transition: all 0.2s ease;
}
a.closesearch:hover {
    text-decoration:none;
}

@media (max-width: 1524px) and (min-width: 1201px) {
    /* 1 row */
    #topsearch .buscatcontainer { max-width:166px; }
    #topsearch .propindcontainer { min-width:115px; }
    /*#topsearch .locationcontainer { max-width:276px; }*/
    #topsearch .locationcontainer { max-width:325px; }
    #topsearch .bedscontainer { min-width:130px; }
    /*.buttondiv { float:right; max-width:135px; margin-left:0; padding-left:0; }*/
    .buttondiv { float:right; max-width:145px; margin-left:0; padding-left:0; }
    /* we really need to make the font size smaller, otherwise its impossible */
    #topsearch select, #topsearch input[type=text] { font-size:13px; height:54px; }
    a.closesearch {
        margin-right: 25px;
    }
}

@media (max-width: 1200px) {
    /* 2 rows */
    #topsearch .searchcontainer { padding:20px 35px 0px 35px; }
    #topsearch .buscatcontainer { width:33.33333334%; min-width:33.33333334%; }    
    #topsearch .propindcontainer { width:23.33333334%; min-width:23.33333334%; }    
    #topsearch .locationcontainer { width:43.33333334%; min-width:43.33333334%; }
    #topsearch .bedscontainer { width:27.66666667%; min-width:27.66666667%; }
    #topsearch .pricecontainer { width:45.66666667%; min-width:45.66666667%; }
    #topsearch .buttondiv { width:26.66666667%; min-width:180px; float:left; max-width:26.66666667%; }
    #topsearch select, #topsearch input[type=text] { font-size:inherit; }
    a.closesearch {
        top:-15px;
        margin-right: 25px;
    }
}

@media (max-width: 992px) {    
    /* 2 rows */
    #topsearch .searchcontainer { padding:20px 20px 0px 20px; }
    #topsearch .buscatcontainer { width:33.33333334%; min-width:33.33333334%; }    
    #topsearch .propindcontainer { width:23.33333334%; min-width:23.33333334%; }    
    #topsearch .locationcontainer { width:43.33333334%; min-width:43.33333334%; }
    #topsearch .bedscontainer { width:27.66666667%; min-width:27.66666667%; }
    #topsearch .pricecontainer { width:45.66666667%; min-width:45.66666667%; }
    #topsearch .buttondiv { width:26.66666667%; min-width:180px; }
    #topsearch select, #topsearch input[type=text] { font-size:inherit; }
    
    // extended height stuff was here
    
    a.closesearch {
        top:-15px;
        margin-right: 0px;
    }
}

/* sm */
@media (max-width: 768px) {
    .site-wrap { margin-top:70px; }	
    .navsearch-trigger ~ label[for="search-trigger"] {
      right: 95px;
    }
    .navsearch-trigger:checked ~ label[for="search-trigger"] {
      right: 395px;
    }

    a.closesearch {
        top:-15px;
        margin-right: 10px;
    }
    
    /* 3 rows */
    #topsearch .searchcontainer { padding:50px 20px 0px 20px; }
    #topsearch .buscatcontainer { width:50%; min-width:50%; }    
    #topsearch .propindcontainer { width:50%; min-width:50%; }    
    #topsearch .locationcontainer { width:100%; min-width:100%; }
    #topsearch .bedscontainer { width:100%; min-width:100%; }
    #topsearch .pricecontainer { width:100%; min-width:100%; }
    #topsearch .buttondiv { float:left; padding-top:15px; }
    #topsearch select, #topsearch input[type=text] { font-size:inherit; }
    
    #topsearch { height:570px; top: -570px; }
    
    .search-trigger:checked ~ label[for="search-trigger"] {
      top: 600px;
    }
    .search-trigger:checked ~ label[for="search-trigger"].shrink {
      top: 591px;
    }

    .search-trigger:checked ~ .site-wrap, .search-trigger:checked ~ .navigation, .search-trigger:checked ~ nav, .search-trigger:checked ~ nav.shrink {
      top: 570px;
    }

    .search-trigger:checked ~ .site-wrap nav, .search-trigger:checked ~ .site-wrap nav.shrink {
      top: 570px;
    }

    .search-trigger:checked ~ label[for="nav-trigger"] {
      top: 601px;
    }
    .search-trigger:checked ~ label[for="nav-trigger"].shrink {
      top: 592px;
    }
        
}    

@media (max-width: 510px) {
    .navsearch-trigger ~ label[for="search-trigger"] {
      right: 85px;
    }
    .navsearch-trigger:checked ~ label[for="search-trigger"] {
      right: 385px;
    }
    #topsearch select, #topsearch input[type=text] { font-size:inherit; }
    
    .search-trigger:checked ~ #topsearch {
        height:100%;
        overflow-y: auto;
        overflow-x: hidden;
    }        
    .search-trigger:checked ~ label[for="search-trigger"].shrink, .search-trigger:checked ~ label[for="nav-trigger"].shrink {
      top: 100%;
    }    
}

/* xsm */
@media (max-width: 440px) {
    .site-wrap { margin-top:0; }
    #topsearch .searchcontainer { padding:50px 10px 0px 10px; }
    #topsearch .buscatcontainer { width:55%; min-width:55%; padding-right:0; }    
    #topsearch .propindcontainer { width:45%; min-width:45%; }
    #topsearch select, #topsearch input[type=text] { font-size:inherit; }
    #topsearch .buttondiv { padding-left: 20px; }
    a.closesearch {
        top:-20px;
        margin-right: 0px;
    }
    .navsearch-trigger ~ label[for="search-trigger"] {
    	right:55px;
    }
    .navsearch-trigger:checked ~ label[for="search-trigger"] {
    	right:355px;
    }
    .search-trigger:checked ~ #topsearch {
        height:100%;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .search-trigger:checked ~ label[for="search-trigger"].shrink, .search-trigger:checked ~ label[for="nav-trigger"].shrink {
      top: 100%;
    }    
}