@import url('https://fonts.googleapis.com/css?family=Raleway:400,400i,500,500i,600,600i,700,700i');
@import url('https://fonts.googleapis.com/css?family=Lobster');

/* --- @general --- */



html, body {

  padding: 0;

  margin: 0;

/*  font-family: Georgia, Constantia, "Lucida Bright", "DejaVu Serif", serif;*/

  font-family: Raleway;
  font-weight: 500;

  color: #4F4944;
  


}



form {

  margin: 0;

  padding: 0;

}



* {

  -webkit-box-sizing: border-box !important;

  -moz-box-sizing: border-box !important;

  -ms-box-sizing: border-box !important;

  -o-box-sizing: border-box !important;

  box-sizing: border-box !important;

}



input, 

textarea,

select {

/*  font-family: "Times New Roman", Georgia, Constantia, "Lucida Bright", "DejaVu Serif", serif;*/
  font-family: Raleway;
  
  font-weight: 500;

/*  font-weight: normal;*/

  padding: .5rem 1rem;

/*  background: rgba(79,73,68,.1);*/


  background: #eef3f7;

  border: 0;

  font-size: 1rem;


  margin: 0 0 1.2rem;

}



input[type=submit] {

  color: #fff;

  background: rgba(63,63,63,0.7);

}



input[type=submit]:hover {

  background: rgba(55,180,80,1);

}



input[type=submit]:active {

  background: rgba(60,240,100,1);

}





h1,

h2,

h3,

h4,

h5,

h6 {

  margin: 0 0 .5rem;
  font-weight: 500;

}



a:hover {

  text-decoration:underline;

  color: rgba(70,140,200,1);

}



a:active {

  text-decoration:underline;

  color: rgba(55,127,191,1);

}



button {

  border: 0;

}



::-moz-selection {

    background: rgba(55,180,80,1);

    color: #fff;

}



::selection {

    background: rgba(55,180,80,1);

    color: #fff;

}



hr{

/*  height: .2rem; */

/*  border-top: solid .2rem rgba(79,73,68,0.6); */

  border-top: solid .2rem rgba(70,140,200,.8);
}



/* --- @Fontello --- */

i[class~=icon],

i[class*=icon] {

    font-family: "br";

    font-style: normal;

    font-weight: normal;

    speak: none;

    display: inline-block;

    text-decoration: inherit;

    width: 1em;

    margin-right: .2em;

    text-align: center;

    font-variant: normal;

    text-transform: none;

    line-height: 1em;

    margin-left: .2em;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}







/* --- @helpers --- */



a,

.btn, .btn *,

input[type=submit],

#featured,

#results,

#contact,

.anim {

  -webkit-transition: all .15s;

  -moz-transition: all .15s;

  -ms-transition: all .15s;

  -o-transition: all .15s;

  transition: all .15s;

}



.pad-x {

  padding-left: 1rem;

  padding-right: 1rem;

}



.pad-y {

  padding-top: 1rem;

  padding-bottom: 1rem;

}



.mar-x {

  margin-left: 1rem;

  margin-right: 1rem;

}



.mar-y {

  margin-top: .5rem;

  margin-bottom: .5rem;

}



.center {

  margin-left: auto;

  margin-right: auto;

}



.text-center {

  text-align: center;

}



.title {

  color: rgba(70,140,200,1);
  font-family: Lobster;

  position: relative;

  font-size: 2rem;

  padding-bottom: .8rem;

  margin-bottom: 1.4rem;

  border-bottom: solid .2rem rgba(70,140,200,.8);
/*  border-bottom: solid .2rem rgba(79,73,68,0.6);*/

}



.container {

  padding: 1rem 1.2rem;

}



.clearfix:before,

.clearfix:after,

.container:before,

.container:after {

  content: " "; /* 1 */

  display: table; /* 2 */

}



.clearfix:after,

.container:after {

  clear: both;

}



nav,

header,

footer,

.no-select {

  -webkit-user-select:none;

  -moz-user-select:none;

  -ms-user-select:none;

  -o-user-select:none;

  user-select:none;

}







/* --- @Header & Footer --- */




header,

footer {



  position: relative;

  display: block;

/*  background: rgba(55,127,191,1);*/
  background: #358;

  color: #fff;
  
  font-weight: 500;

  

/*

rgba(20,100,60,1)

rgba(51,102,153,1)

rgba(180,55,80,1)

rgba(20,100,60,1)

rgba(55,127,191,1)

rgba(79,73,68,.9)

#817565

*/

}

header {
  max-height: 10rem;
}


.logo img {

  width: 12rem;
  max-width: 100%;

}



.identity {

  display: table;

  vertical-align: bottom;

}



.identity .tagline {

  font-family: Lobster;
  
  font-size: 1.4rem;

  display: table-cell;

  vertical-align: bottom;

  padding: .5rem 2rem;
  
  font-style: italic;

}



header .logo {

/*  display: inline-block;*/

  display: table-cell;

  vertical-align: bottom;

  padding: 1rem;
  

    width: 16rem;
    background: #346;
    text-align: center;
  
}






header a,

header a:hover,

footer a,

footer a:hover {

  color: #fff;

}



footer {

  padding: 1rem;

}



footer .logo {

  display: inline-block;
  margin-right: 2rem;
  float: left;

  
    max-width: 6rem;
  
}



.copyright {

  line-height: 3.2rem;

  display: inline-block;
  
  float: left;

}



.site-by-webrew {

  line-height: 3.2rem;

  display: inline-block;

  text-align: right;

  float: right;

  text-decoration: none;

}



.site-by-webrew img {

  height: 2.3rem;

  margin-left: .6rem;

}







/* --- @Header nav --- */



header nav {

  display: inline-block;

  position: absolute;

  bottom: 0;

  right: 0;

}



header nav ul li {

  display: inline-block;

  padding: .5rem 1rem;

}







/* --- @Navigation --- */



nav {

  display: block;

}



nav ul {

  list-style: none;

  margin: 0;

  padding: 0;

}



nav ul li {

  display: block;

  margin: 0;

  padding: 0;

}



nav ul li a {

  display: block;

  text-decoration: none;
  
}



nav ul li a:hover {

  text-decoration: underline;

}







/* -- @nav-left -- */



.nav-left {

/*  background: #F5F4F3;*/

  background: #eef3f7;

  color: #358;
  
  width: 16rem;

  padding-top: 1rem;

  max-width: 100%;

}



.nav-left a {

/*  color: #4F4944;*/

  
  color: #358;

/*  padding: .2rem 1rem;*/

}



.nav-left a:hover {

  background: #fff;

  color: rgba(55,127,191,1);

}





.nav-left .title {

  margin-left:1rem;

  margin-right:1rem;

}



nav h4,

nav h2 {

  padding: .2rem 1rem;

  margin: 0;
  font-weight: 600;

}



nav ul h4 {

  cursor:pointer;  

}



nav ul h4:hover {

  background: #fff;

  text-decoration:underline;

  color: rgba(55,127,191,1);

}



nav ul h4:active {

  color: rgba(55,180,80,1);

}

.nav-link-special h4 {
  font-weight: 600;
}
.nav-link-special {margin-bottom:1rem;}

/* --- @Accordian --- */





/*.accordion .pane,*/

.accordion h4 {

  line-height:1.6;

  cursor:pointer;  

}



.accordion h4:hover {

  background: #fff;

  text-decoration:underline;

  color: rgba(55,127,191,1);

}



.accordion .current {

  background: rgba(255,255,255,0.4);

  color: rgba(55,180,80,1);

}

.accordion .current:hover {

  color: rgba(55,180,80,1);

}



.accordion .pane {

  padding: 0;

  background: rgba(255,255,255,0.4);

}

.accordion .l1 {

  font-size:1.3rem;

}



.accordion .l2 {

  padding-left: 1.8rem;

  font-size:1.1rem;

}

.accordion .l3 {

  padding-left: 2.6rem;

  font-size:.9rem;

}

.accordion .l4 {

  padding-left: 3.4rem;

  font-size:.8rem;

}



/* --- @table wrapper --- */



.table-wrapper {

  display: block;

  padding: 0;

  margin: 0;

  vertical-align: top;

}



.display-table {

  display:table;

  vertical-align: top;

  padding:0;

  margin:0;

  width: 100%;

}



.display-table .nav-left,

.display-table .content {

  display: table-cell;

  height: 100%;

  padding-bottom: 6rem;

  margin: 0;

}

.display-table * {

  vertical-align: top;

}







/* --- @listing display --- */



#featured .listings {

  height: 21.5rem;

  overflow: hidden;

}



#featured {  

  opacity: 1;

  height:28.6rem;

  overflow: hidden;

}



#featured.inactive {

  opacity: 0;

  height: 0;

}



#results {

  opacity: 1;

}



#results.inactive {

  opacity: 0;

}



.listings {

/*  float: left; */

  width: 100%;

  margin-bottom: 3rem;

}



.listings .list-item {

  display: inline-block;

  position: relative;

  width: 12.4rem;

  margin: 0 .4rem 1.2rem;

  font-size: .8rem;

  text-align: center;

  height: 20rem;

}



.listings .list-title {

  max-height: 2.2rem;

  overflow: hidden;

  padding: 0 .5rem;

}



.listings .list-image {

  display: block;

  width: 100%;

  background-color: #fff;
  background-position: center;

  background-repeat: no-repeat;

  background-size: contain;

  padding:0 0 100%;

  border: solid .2rem rgba(79,73,68,0.8);

  margin-bottom: .4rem;

}



.listings .list-link {

  display: block;

  height: 100%;

  text-decoration: none;

  background: #fafafa;

  color: #4F4944;

}







.listings .list-link:hover,

.list-item:hover .list-link:hover {

  background: #fafaff;

}



.list-item:hover .list-link {

  color: rgba(55,180,80,1);

  background: #fafffa;

}

.list-item:hover .list-link .list-image {

  border-color: rgba(55,180,80,1);

}



.listings .list-item:hover,

.listings .list-link:hover,

.list-item:hover .list-link:hover {

  color: rgba(55,127,191,1); 

}



.listings .list-link:hover .list-image {

  border-color: rgba(55,127,191,1); 

}



.listings .list-link:active {

  color: rgba(55,180,80,1);

}





.listings .list-item:hover .btn {

  background: rgba(55,127,191,1);

  border-color: rgba(33,88,123,1);

}



.listings .list-item .btn {

  position: absolute;

  width: 100%;

  height: 2.3rem;

}



.listings .list-item .btn-buy {

  bottom: 0;

}



.listings .list-link:active + .btn {

  background: rgba(90,180,240,1);

  border-color: rgba(55,127,191,1);

}







/* --- @Buttons --- */



i[class~=button],

i[class*=button] {

}



.btn {

  text-align: center;

  position: relative;

  display: block;

  color: #fff;

  background: rgba(63,63,63,0.7);

  border-bottom: solid .2rem rgba(31,31,31,1);

  padding: .5rem 1rem;

  text-decoration: none;

}



.btn-buy {

  color: #fff;

}



.list-item:hover .btn:hover,

.btn:hover {

  color: #fff;

  text-decoration: none;

  

  

  background-color: rgba(55,180,80,1);

  border-color: rgba(20,100,60,1);

}



.list-item:hover .btn:active,

.btn:active {

  background-color: rgba(60,240,100,1);

  border-color: rgba(55,180,80,1);

}





.list-item .btn .btn-buy-price,

.list-item .btn .btn-buy-view {

  display: block;

  text-align:center;

  position: absolute;

  top: .5rem;

  left: 0;

  width: 100%;

}



.list-item .btn .btn-buy-price,

.list-item:hover .btn .btn-buy-view,

.list-item:hover .btn:hover .btn-buy-price {

  opacity: 1;

}



.list-item .btn .btn-buy-view,

.list-item:hover .btn .btn-buy-price,

.list-item:hover .btn:hover .btn-buy-view {

  opacity: 0;

}







/* --- @Content --- */



.content {

  

}







/* --- @Contact --- */



#contact {

  width: 100%;

}



.contact_form {

  width: 100%;

  max-width: 55rem;

  margin: 0 auto;

}



.contact_form input,

.contact_form textarea {

  display: inline-block;

  height: 2.3rem;

}



.contact_form textarea {

  height: 8rem;

}



.contact_form input[type=text] {

  width: 48%;

  display: inline-block;

}



.contact_form input[name=contact_name] {

  margin-right: 4% !important;

}



.contact_form input[type=text],

.contact_form textarea {

  

}



.contact_form input[type=submit],

.contact_form textarea {

  display: block;

  width: 100%;

}







/* --- @Search --- */



.search {

  white-space: nowrap;

  position: relative;

  width: 100%;

  max-width: 33rem;

  margin: 1.5rem auto;

  height: 2.3rem;

}



.title .search {

  display: inline-block;

}





.search input,

.search button,

.search button.btn {

  border: 0;

  font-size: 1rem;

  font-weight: normal;

  display: block;

  height: 2.3rem;

  margin: 0 !important;

}



.search input {

  padding: .5rem 7rem .5rem 1rem;

/*  background: rgba(79,73,68,.1); */

  width: 100%;

}



.search button {

  position: absolute;

  top: 0; right: 0;

  text-align: center;

}



.search button:hover,

.search button.btn:hover {

  background-color: rgba(55,180,80,1);

  border-color: rgba(20,100,60,1);

}



.search button:active,

.search button.btn:active {

  background: rgba(60,240,100,1);

}



.search button i {

  font-size: 1.2rem;

}



/* --- @Pagination --- */





.pagination {

  display: block;

  text-align: center;

  line-height: 1.8rem;

  padding: 1rem 0 2rem;

}



.pagination ul {

  margin: 0;

  padding: 0;

  display:block;

}



.pagination li {

  display: inline-block;

  width: 2rem;

  height: 2.2rem;

  cursor: pointer;

}



.pagination li:hover {

  color: rgba(55,127,191,1);

  border-bottom: solid .2rem rgba(55,127,191,1);

}



.pagination .current {

  color: rgba(55,180,80,1);

  border-bottom: solid .2rem rgba(55,180,80,1);

}



.pagination .next:hover,

.pagination .prev:hover {

  border: none;

}



.pagination li.inactive,

.pagination li.inactive:hover {

  color: #ccc;

}



/* --- @Search sort order --- */

.sorting {

  display: block;

  margin: 0 auto;

  text-align: center;

  line-height: 2.3rem;

  padding-bottom: 1rem;

}



.sort-order {

  display: inline-block;

  height: 2.3rem;

}



.sort-order label {

  padding: 0 .5rem;

}



.toggle-order {

  display: inline-block;

  height: 2.3rem;

}



.toggle-order label {

  position: relative;

  display: block;

  width: 100%;

  height: 100%;

  cursor: pointer;

  line-height: 2.3rem;

}



.toggle-order label:hover {

  color:rgba(55,127,191,1);

}



.toggle-order label:active {

  color:rgba(55,180,80,1);

}



.toggle-order label i {

  display: inline-block;

  width: 2.3rem;

  height: 2.3rem;

  padding: 0;

  margin: 0;

  float: left;

}



.toggle-order label i:before {

  line-height: 2.3rem;

}





.toggle-order input[type="checkbox"] {

  opacity: 0;

  position: absolute;

}

.toggle-order input[type="checkbox"]:checked + label .icon-up-open,

.toggle-order input[type="checkbox"] + label .icon-down-open {

  display: none;

}

.toggle-order input[type="checkbox"] + label .icon-up-open,

.toggle-order input[type="checkbox"]:checked + label .icon-down-open {

  display: block;

}



.toggle-order input[type="checkbox"] + label:before {

  content: "Ascending";

  display:inline-block;

  float: right;

  text-align: left;

  width: 6rem;

}



.toggle-order input[type="checkbox"]:checked + label:before {

  content: "Descending";

}







/* --- @page-loader --- */



#page_loader{

  display: none;

  height:auto;

  z-index:0;

  

  opacity: 0;

  

  position:fixed;

  left: 16rem;

  top:0;

  bottom: 0;

  right: 0;

}



#page_loader.active {

  display: block;

  opacity: 1;

  z-index:1000000;

}



.loader{

  margin:0 auto;

  font-size:1rem;

  text-indent:-10000rem;

  

  width:4rem;

  height:4rem;

  

  position: absolute;

  top: 50%;

  left: 50%;

  margin-left: -2rem;

  margin-top: -2rem;

  

  border:1.2rem solid rgba(0,0,0,1);

  border-color:rgba(0,0,0,0) rgba(55,127,191,.2) rgba(90,180,240,.6) rgba(100,200,255,1);



  -webkit-border-radius: 50%;

  -moz-border-radius: 50%;

  border-radius: 50%;

   -webkit-animation: spinner 400ms infinite linear;

   -moz-animation: spinner 400ms infinite linear;

   -ms-animation: spinner 400ms infinite linear;

   -o-animation: spinner 400ms infinite linear;

   animation: spinner 400ms infinite linear;

  z-index: 100001;

}



@-webkit-keyframes spinner {

  0% {

    -webkit-transform: rotate(0deg);

    -moz-transform: rotate(0deg);

    -ms-transform: rotate(0deg);

    -o-transform: rotate(0deg);

    transform: rotate(0deg);

  }



  100% {

    -webkit-transform: rotate(360deg);

    -moz-transform: rotate(360deg);

    -ms-transform: rotate(360deg);

    -o-transform: rotate(360deg);

    transform: rotate(360deg);

  }

}



@-moz-keyframes spinner {

  0% {

    -webkit-transform: rotate(0deg);

    -moz-transform: rotate(0deg);

    -ms-transform: rotate(0deg);

    -o-transform: rotate(0deg);

    transform: rotate(0deg);

  }



  100% {

    -webkit-transform: rotate(360deg);

    -moz-transform: rotate(360deg);

    -ms-transform: rotate(360deg);

    -o-transform: rotate(360deg);

    transform: rotate(360deg);

  }

}



@-o-keyframes spinner {

  0% {

    -webkit-transform: rotate(0deg);

    -moz-transform: rotate(0deg);

    -ms-transform: rotate(0deg);

    -o-transform: rotate(0deg);

    transform: rotate(0deg);

  }



  100% {

    -webkit-transform: rotate(360deg);

    -moz-transform: rotate(360deg);

    -ms-transform: rotate(360deg);

    -o-transform: rotate(360deg);

    transform: rotate(360deg);

  }

}



@keyframes spinner {

  0% {

    -webkit-transform: rotate(0deg);

    -moz-transform: rotate(0deg);

    -ms-transform: rotate(0deg);

    -o-transform: rotate(0deg);

    transform: rotate(0deg);

  }



  100% {

    -webkit-transform: rotate(360deg);

    -moz-transform: rotate(360deg);

    -ms-transform: rotate(360deg);

    -o-transform: rotate(360deg);

    transform: rotate(360deg);

  }

}





















/* --- Admin styles --- */



[contenteditable]:hover,[contenteditable]:focus{text-decoration:underline}

[contenteditable]:focus{text-shadow:1px 1px 1px rgba(66,237,60,0.8)}



.console {

  background:#333;

  color:#fff;

  padding: .5rem 1rem;

  border-bottom: solid .2rem #000;

}



.console a {

  color: #ddd;

  background: rgba(255,255,255,.1);

  display: inline-block;

  padding: .5rem 1rem;

  margin-right: 1rem;

  margin-bottom: .5rem;

  text-decoration: none;

}



.console em {

  float: right;

  display: inline-block;

  padding: .5rem 1rem;

}



.console a:hover {

  background: rgba(55,180,80,1);

  color: #fff;

  text-decoration: underline;

}



.console a:active {

  background: rgba(60,240,100,1);

}



#message {text-align:center;color:#fff;background:#000;border: none 0;padding: 0;line-height: 2.5rem;}



.title a{background:#666;

color:#fff;

display: inline-block;

font-size: 20px;

margin: 0px 5px;

padding: 0px 11px;

border-radius:6px;

text-decoration: none;

vertical-align: baseline;

border-bottom: dotted 2px #ddd;}



.title a:hover{background:#f90}



.list-item {position:relative}

.cms-buttons{position:absolute;top:0;right:0;z-index:5000;}

.cms-buttons a.cms{

width:2.5rem;height:2.5rem;

display:inline-block;

text-align:center;

text-decoration:none;

font-size:1rem;

text-align: center;

line-height: 2.3rem;

/*background: rgba(0,0,0,0.8);*/

color:#fff;

}



/*.list-item .cms-buttons a.cms:hover{background:#000}*/



.cms-buttons a {

  border-left: solid .4rem #fff;

  border-bottom: solid .4rem #fff;

  

  -webkit-box-sizing: content-box;

  -moz-box-sizing: content-box;

  -ms-box-sizing: content-box;

  -o-box-sizing: content-box;

  box-sizing: content-box;



}



.cms-buttons a i {

  margin: 0;

  padding: 0;

  text-align: center;

  display:inline;

  line-height: 2.3rem;

  color: #fff;

}



.cms-add {

  background: rgba(55,180,80,1);

}



.cms-add:hover {

  background: rgba(60,240,100,1);

}



.cms-add:active {

  background: rgba(80,255,100,1);

}





.cms-remove {

  background: rgba(120,0,20,1);

}



.cms-remove:hover  {

  background: rgba(180,0,40,1);

}



.cms-remove:active {

  background: rgba(255,0,60,1);

}



footer{clear:left}



.label-switch.cms-buttons {display:none;top:2px;right:2px;}





/* --- @Color notes --- *//*



Blue:

  rgba(90,180,240,1)

  rgba(55,127,191,1)



Greens:

  rgba(60,240,100,1)

  rgba(55,180,80,1)

  rgba(20,100,60,1)



Red:

  rgba(180,55,80,1)

  rgba(255,60,100,1)

  rgba(180,55,80,1)

  

Oranges:

  rgba(220,160,0,1);

  rgba(160,80,0,1);



Brown:

  #4F4944

  rgba(79,73,68,1)



Light Brown:

  #F5F4F3



*/