@import '../../less/bootstrap/bootstrap';
@import '../../less/fontawesome/font-awesome';

/******** MIXINS ********/

.border-radius (@radius) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}
.transition (@transition) {
  -webkit-transition: @transition;  
  -moz-transition:    @transition;
  -ms-transition:     @transition; 
  -o-transition:      @transition;  
}
.centered {
  text-align:center;
}

@highdpi: ~"(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx)";

.at2x(@path, @w: auto, @h: auto) {
  background-image: url(@path);
  @at2x_path: ~`@{path}.replace(/\.\w+$/, function(match) { return "@2x" + match; })`;

  @media @highdpi {
    background-image: url("@{at2x_path}");
    background-size: @w @h;
  }
}

.columns(@colcount: 0, @colwidth: 250px, @colgap: 50px, @columnRuleColor: #EEE, @columnRuleStyle: solid, @columnRuleWidth: 1px) {
  -moz-column-width: @colwidth;
  -moz-column-count: @colcount;
  -moz-column-gap: @colgap;
  -moz-column-rule-color: @columnRuleColor;
  -moz-column-rule-style: @columnRuleStyle;
  -moz-column-rule-width: @columnRuleWidth;
  -webkit-column-width: @colwidth;
  -webkit-column-count: @colcount;
  -webkit-column-gap: @colgap;
  -webkit-column-rule-color: @columnRuleColor;
  -webkit-column-rule-style: @columnRuleStyle;
  -webkit-column-rule-width: @columnRuleWidth;
  column-width: @colwidth;
  column-count: @colcount;
  column-gap: @colgap;
  column-rule-color: @columnRuleColor;
  column-rule-style: @columnRuleStyle;
  column-rule-width: @columnRuleWidth;
}

/******** VARIABLES ********/

@FontAwesomePath:   "../fonts";
@main-font:         'Open Sans', Arial, Helvetica, sans-serif;
@main-color:        #3399ff;
@secondary-color:   #34495e;
@tertiary-color:    #3498db;
@additional-color:  #27ae60;

/******** RULES ********/

body,h1,h2,h3,h4,h5,h6 {
  font-family: @main-font;
}

.btn, a {
  .transition(0.4s all);
}

div.inline {
  display: inline-block;
}

.icon {
  margin-right: 3px;
}

html, body {
  height:100%;
}

.carousel {
  height: 50%;
  img, .img {
    width: 100%;
    height: 100%;
    background-position: top center;
    background-size: cover;
  }
  .img-1 {
    background-image: url("../images/header.jpg");
  }
  .img-static {
    background-image: url("../images/static.jpg");
  }
}
.middle {
  width: 100%;
  max-height: 500px;
  background-image: url("../images/middle.jpg");
  background-position: top center;
  background-size: cover;
}

.item,
.active,
.carousel-inner {
  height: 100%;
}

.navbar {
  margin-bottom: 0px;
}

@media (max-width: 767px) {
  .carousel {
    height: 70%; /* increases the carousel height so it looks good on phones */
  }
}

.modal-body {
  .centered();
  img {
    width: 100%;
    height: 100%;
  }
}

.link_reserve {
  .centered();
  font-size: 16px;
  display: block;
}

.order-button {
  float: right;
}

.columned {
  .columns(3);
}

.offer {
  font-size: 24px;
  .centered();
  .price {
    font-weight: bold;
    font-size: 40px;
    margin: 0 10px;
  }
}

.details {
  float: left;
}