html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}


//header total
@headerHeight:6.75em;

//black part
@preHeight: 2.75em;
//yellow part
@navHeight: (@headerHeight - @preHeight);
//yellow part logo
@hdlgw:10.625em;

//footer
@ftPadding:1.875em;


@rad:5px;

.wh(@w,@h:@w){
  width: @w;
  height: @h;
}

html,
body {
  margin: 0;
  padding: 0;
  width: @total;
  background: @bgbody;
  min-width: @minwidth !important;
}

body {
  font: @bodysize/@bodyline @bodyfont, sans-serif;
  font-weight: 300;
  color: @cbody;

  min-height: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}
.page {
  padding: (@headerHeight - 3em) 0 0;
}

a {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  &:hover {
    color: inherit;
    text-decoration: none;
  }
}
figure, figcaption {
  display: block;
  padding: 0;
  margin: 0;
}
figcaption {
  color: inherit;
}
figure {
  img {
    max-width: 100%;
  }
}
img {
  display: block;
  padding: 0;
  margin: 0;
}
h1, h2, h3 {
  position: relative;
  font-weight: 300;
  font-size: inherit;
  padding: 0;
  margin: 0;
}
p {
  padding: 0;
  margin: 0;
}
ul,ol {
  &:last-child {
    margin-bottom: 0;
  }
}
.c:after {
  content: "";
  display: table;
  clear: both;
}
article {
  display: flex;
  flex-direction: column;
}
img[class*="-img"] {
  max-width: 100%;
}
.hero-img() {
  position: relative;
  &-img {
    position: relative;
    z-index: 0;
  }
  > .inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
  }
}
@innerPadding:8.9%;
.inner {
  width: @total;
  max-width: @maxwidth;
  margin: 0 auto;
  padding-left:@innerPadding;
  padding-right:@innerPadding;
  position: relative;
  height: 100%;
  flex: 1;
  &.no-sides {
    padding-left: 0;
    padding-right: 0;
  }
  &.no-right {
    padding-right: 0;
  }
}


@scroll:20px;
@maxwidth:1920px;
@minwidth:320px;
@total:100%;
@half:50%;
@quarter:25%;


.max(){
  max-width:@maxwidth;
  margin-left:auto;
  margin-right:auto;
}


.page {
  .max;
}
.bigYellowTitle() {
  .caps;
  color:@yellow;
  .font(4em,normal);
  margin-bottom: 1em;
}
.standardDesc(@col:inherit){
  .font(1.438em,normal);
  color:@col;
  p {
    margin-bottom: 1.4em;
    &:last-child{
      margin-bottom: 0;
    }
  }
}
.doubleTitle(){
  display: flex;
  align-items: center;
}
/**generic classes*/
.setCol(@w){
    flex: 1 1 @w;
}
.cols {
  display: flex;
  flex-wrap: nowrap;
}
.col {
  img {
    max-width: 100%;
  }
}

// last menu child destyle
.lch(@side:right) {
  &:last-child {
    padding-@{side}: 0;
    margin-@{side}: 0;
    border-@{side}: none;
  }
}
.caps {
  text-transform: uppercase;
}
.bold {
  font-weight: 400;
}
.highlight {
  color: @yellow;
  font-weight: 400;
}
.highlight-2 {
   color: @green;
  font-weight: 400;
}


.underline {
  text-decoration: underline;
}
//horizontal menus
.notul() {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  height: 100%;
  align-self: center;
  > li {
    text-align: center;
    align-self: center;
    .lch;
  }
}

.odd {
  background-color: @odd;
}
.big {
   i {
    font-style: normal;
  }
}

.img-blocks {
  padding: 0;
  list-style: none;
  width: @total;
  display: flex;
  height: 100%;
  margin: 0 auto;
  flex-wrap: wrap;
  height: auto;
  figure {
    display: flex;
    flex: 1;
    margin: 0 auto;
    align-items: center;
    flex-direction: column;
    position: relative;
    .transit;
  }
  figcaption {
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .ttl {
    margin-bottom: 0;
  }
}


.btn {
  display: block;
  border: 0;
  text-decoration: none;
  white-space: nowrap;
  text-align: center;
  line-height: 1.8em;
  font-size: 1.4em;
  .transit;
  span {
    text-decoration: underline;
  }
  &:hover {
    color: inherit;
    cursor: pointer;
    outline: none;
  }
  &.disabled {
    cursor: default;
  }
}
.btn {
  color: @white;
  background-color: @green;
  border: 1px solid @green;
  .caps;
  &-inverted {
    color: @black;
    background-color: transparent;
    border: 1px solid;
  }
  &:hover {
    background-color: @yellow;
    color: @black;
    border-color: @yellow;
  }
}

.transit(@sec:0.5s,@typ:ease-in-out) {
  transition: all @sec @typ;
}