/*
The wrapper is to be wrapped around the content of the website with the exclusion of the overlays (which should go over the wrapper)
*/
#wrapper {
  position: relative;
  z-index: 300;
  }

/*
The overlays wrapper will contain all pop-ups.
*/
#overlays {
  position: relative;
  z-index: 400;
  height: 0;
  }

/*The behaviour of the default popupMask*/
.popupMask {
  /*display:none;*/
  background: rgba(0, 0, 0, 0.75);
  position: fixed;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
  text-align: center;
  padding: 40px;
  outline: none;
  }

/*popupWrapper is the box actually containing the content. We center it for obvious reasons.*/
.popupWrapper {
  position: relative;
  margin: 0 auto;
  display: inline-block;
  background: white;
  text-align: left;
  }

.bejo_draggable_element .bejo_close,
.popupWrapper .bejo_close {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  z-index: 3;
  }

table {
  border-collapse: collapse;
  }

/*
The #content wrapper will contain the website page.
*/
#content {

  }

/*Scale the container wrapper CLASS for responsive*/
/*container defaults to boxed 1250px*/
.container {
  padding: 0;
  width: 1250px;
  margin: 0 auto;
  }

.container.fluid {
  width: 100%;
  }

.tCenter {
  text-align: center;
  }

.tRight {
  text-align: right;
  }

.tLeft {
  text-align: left;
  }

.fRight {
  float: right;
  }

.fLeft {
  float: left;
  }

.fCenter {
  margin: 0 auto;
  float: none;
  }

/*Global columns settings*/
.row {
  position: relative;
  margin: 15px 0;
  }

.clearFix::after, #content::after, #overlays::after, #wrapper::after, .row::after {
  content: "";
  display: block;
  clear: both;
  }

.clear {
  clear: both;
  }

.boxFix {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  }

.row.noMar {
  margin: 0;
  }

.row.padded {
  margin: 0;
  padding: 15px 0;
  }

.column {
  display: block;
  float: left;
  padding: 0 15px;
  }

.column.fRight {
  float: right;
  }

/*
Set the default colums
s = phones ( 768px -)
m = tablets portait / big phones (768px - 1024px)
l = tablet landscape / small desktop (1024px -)
xl = big desktop (1200px +)
*/

.s-col-100, .m-col-100, .xl-col-100 {
  width: 100%;
  }

.s-col-90, .m-col-90, .xl-col-90 {
  width: 90%;
  }

.s-col-85, .m-col-85, .xl-col-85 {
  width: 85%;
  }

.s-col-80, .m-col-80, .xl-col-80 {
  width: 80%;
  }

.s-col-75, .m-col-75, .xl-col-75 {
  width: 75%;
  }

.s-col-66, .m-col-66, .xl-col-66 {
  width: calc(100% / 3 * 2);
  }

.s-col-50, .m-col-50, .xl-col-50 {
  width: 50%;
  }

.s-col-40, .m-col-40, .xl-col-40 {
  width: 40%;
  }

.s-col-33, .m-col-33, .xl-col-33 {
  width: calc(100% / 3);
  }

.s-col-30, .m-col-30, .xl-col-30 {
  width: 30%;
  }

.s-col-25, .m-col-25, .xl-col-25 {
  width: 25%;
  }

.s-col-20, .m-col-20, .xl-col-20 {
  width: 20%;
  }

.s-col-10, .m-col-10, .xl-col-10 {
  width: 10%;
  }

.s-col-5, .m-col-5, .xl-col-5 {
  width: 5%;
  }

/*L is default, so override previous by default.*/
.l-col-100 {
  width: 100%;
  }

.l-col-90 {
  width: 90%;
  }

.l-col-85 {
  width: 85%;
  }

.l-col-80 {
  width: 80%;
  }

.l-col-75 {
  width: 75%;
  }

.l-col-66 {
  width: calc(100% / 3 * 2);
  }

.l-col-50 {
  width: 50%;

  }

.l-col-33 {
  width: calc(100% / 3);

  }

.l-col-25 {
  width: 25%;

  }

.l-col-20 {
  width: 20%;

  }

.l-col-10 {
  width: 10%;
  }

.hidden {
  display: none;
  }

.visible {
  display: block;
  }

.column.noPad {
  padding: 0;
  }

/*Media queries*/
@media only screen and (max-width: 1023px), screen and (max-device-width: 1023px) {
  .container {
    width: 100%;
    }

  .m-col-100 {
    width: 100%;
    }

  .m-col-90 {
    width: 90%;
    }

  .m-col-85 {
    width: 85%;
    }

  .m-col-80 {
    width: 80%;
    }

  .m-col-75 {
    width: 75%;
    }

  .m-col-66 {
    width: calc(100% / 3 * 2);
    }

  .m-col-50 {
    width: 50%;
    }

  .m-col-33 {
    width: calc(100% / 3);
    }

  .m-col-25 {
    width: 25%;
    }

  .m-col-20 {
    width: 20%;
    }

  .m-col-10 {
    width: 10%;
    }
  }

@media only screen and (max-width: 767px), screen and (max-device-width: 767px) {
  .s-col-100 {
    width: 100%;
    }

  .s-col-90 {
    width: 90%;
    }

  .s-col-85 {
    width: 85%;
    }

  .s-col-80 {
    width: 80%;
    }

  .s-col-75 {
    width: 75%;
    }

  .s-col-66 {
    width: calc(100% / 3 * 2);
    }

  .s-col-50 {
    width: 50%;
    }

  .s-col-33 {
    width: calc(100% / 3);
    }

  .s-col-25 {
    width: 25%;
    }

  .s-col-20 {
    width: 20%;
    }

  .s-col-10 {
    width: 10%;
    }
  }

@media only screen and (min-width: 1200px), screen and (min-device-width: 1200px) {
  .xl-col-100 {
    width: 100%;
    }

  .xl-col-90 {
    width: 90%;
    }

  .xl-col-85 {
    width: 85%;
    }

  .xl-col-80 {
    width: 80%;
    }

  .xl-col-75 {
    width: 75%;
    }

  .xl-col-66 {
    width: calc(100% / 3 * 2);
    }

  .xl-col-50 {
    width: 50%;
    }

  .xl-col-33 {
    width: calc(100% / 3);
    }

  .xl-col-25 {
    width: 25%;
    }

  .xl-col-20 {
    width: 20%;
    }

  .xl-col-10 {
    width: 10%;
    }
  }

.no-select {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  }

/*.no-select:active {*/
/*cursor: move;*/
/*cursor: -moz-grabbing;*/
/*cursor: -webkit-grabbing;*/
/*}*/

/**START BEJO SLIDING ELEMENT**/
.bejo_el_sliding {
  -webkit-transition: height 0.4s ease-in-out;
  -moz-transition: height 0.4s ease-in-out;
  -o-transition: height 0.4s ease-in-out;
  transition: height 0.4s ease;
  }

/**END BEJO SLIDING ELEMENT**/