// GLOBAL VARIABLES/MIXINS

@white:#ffffff;
@black:#000000;
@maincolor:#456f96;
@darkgrey:#232323;
@grey:#97a1a7;
@mediumgrey:#a7a9ab;
@green:#cad053;
@red:#e2453e;


@padding: 20px;
@margin: 20px;
@baseLineHeight: 20px;
@minheight: 50px;


@laptop: ~"screen and (max-width:1250px)";
@tabletlandscape:      ~"screen and (max-width: 1024px)";
@tablet:      ~"screen and (max-width: 768px)";
@mobilelandscape:     ~"screen and (max-width: 600px)";
@mobile:      ~"screen and (max-width: 500px)";
@mobilesmall:      ~"screen and (max-width: 400px)";

ul {margin:0; padding:0;}
li {list-style:none;}

.fsize (@size: 18px) {font-size: @size;}
.line {border-bottom: 1px solid #ecf2f6;}

.normal{font-weight: normal;}
.thin{font-family: 'gotham-medium', font-family, sans-serif; font-weight:normal}
.italic{font-family: 'gotham-light', font-family, sans-serif; font-weight:normal}
.light{font-family: 'gothamrnd-light', font-family, sans-serif; font-weight:normal}
.extralight {font-family: 'gotham-extralight', font-family, sans-serif; font-weight:normal}
.medium {font-family: 'gothamrnd-medium', font-family, sans-serif; font-weight:bold}
.book {font-family: 'gotham-book', font-family, sans-serif; font-weight:bold}
.gothamrnd{font-family: 'gothamrnd-book', sans-serif; font-weight: normal;}
.extrabold{font-family: 'Gothamrnd-bold', font-family, sans-serif; font-weight:extrabold}

h1,h2,h3,h4,h5,h6{font-weight:bold; margin:0px;}

.roundedcorners (@radius: 5px) {border-radius: @radius;}
.transition (@range: all, @time: 0.3s, @ease: ease-in-out) {-moz-transition: @range @time @ease;-webkit-transition: @range @time @ease;-o-transition: @range @time @ease;transition: @range @time @ease;}
.notransition {-moz-transition: none;-webkit-transition: none;-o-transition: color 0 ease-in;transition: none;}
.boxsizing{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; }
.noboxsizing{box-sizing: content-box;-webkit-box-sizing: content-box;-moz-box-sizing: content-box;}
.maintextcolor{color: @maincolor}

.uppercase{text-transform: uppercase;}
.aleft{text-align: left;}.aright{text-align: right;}.alcenter{text-align: center;}


.border-r{border-radius: 50%}
.alignleft,.floatLeft, .left{float:left;}
.alignright,.floatRight, .right{float:right;}
.floatnone{float:none;}
.clearfix{clear:both; display: block;}


.wrapper{ max-width: 1200px; position: relative; margin: auto;}
a{.transition;text-decoration: none;}

img{max-width: 100%; vertical-align: middle; border: 0;
  &.alignleft{margin-right: 10px; margin-bottom: 10px;}
  &.alignright{margin-left: 10px; margin-bottom: 10px;}
}

.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}

.inlineblock {display: inline-block;}
.block {display: block;}

* html .clearfix {height: 1%;}
.clearfix {display: block;}
body{color: @black;.normal;.fsize(12px);letter-spacing:0;background: @white; padding-top: 0px; margin: 0; font-family: 'Open Sans', sans-serif;}

main#main{ .wrapper}

.archive-content{ margin:50px 0;
  article{ width:49.5%; float: left;border: 1px solid #e1e1e1; padding:5px;
    .entry-content{ margin: 0 !important; padding: 0 !important;
      .imager{ height: 170px; background-size: cover; background-position: center; float: left; width: 50%; position: relative;}
      .desc{float: right; width:50%; padding-left:15px; padding-right: 10px;
        h2{height: 40px ;line-height:40px; font-weight: 600; border-bottom: 1px solid #e1e1e1; margin-bottom: 15px;
          .price{ background: @maincolor; color: @white;}
        }
        .detail p{.fsize(13px); line-height: 18px; color: @grey}
        .more{ text-transform: uppercase; .fsize(12px); color:#c1c1c1; border: 1px solid #e1e1e1; border-radius: 50px; display: inline-block; float: left; line-height: 28px; text-align: center; width:100px;
          &:hover{ background: @maincolor; color: @white; border: 1px solid @maincolor}
        }
      }
    }
    &:nth-child(even){ float: right}
  }
  .pagination{ display: block; clear: both; text-align: right;
    .pages{color: @grey; float: left}
    .page-numbers{ display: inline-block; border: 1px solid #e1e1e1; height: 30px; line-height: 30px; padding: 0 10px; color: @grey;
      &.current, &:hover{ background: @maincolor; color: @white; border-color: @maincolor}
    }
  }
}