/*

///////////////////////////////////////////////////////


//////   ///     ///////   ////    //   ///////   ///
///      ///     ///  //   /// /   //   //        ///
//////   ///     ///////   ///  /  //   //        ///
    //   ///     /// //    ///   / //   //        ///
//////   //////  ///  //   ///    ///   ///////   //////


////////////////////////////////////////////////////////

* Introduction *

This is an lightweight CSS boot to create basically anything
It include a grid 4 column grid system and basic CSS Tools

/* --------------------------------------------------------------
/* =TOOLBOX
-------------------------------------------------------------- */
.centered {
  text-align: center;
}
.aligned-right {
  text-align: right;
}
.aligned-left {
  text-align: left;
}

/* --------------------------------------------------------------
/* =WRAPPING
-------------------------------------------------------------- */
.small-wrapper {
  width: 720px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.wrapper {
  width: 960px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.large-wrapper {
  width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* --------------------------------------------------------------
/* =IMAGE
-------------------------------------------------------------- */
figure {
  margin: 0;
  padding: 0;
}
figcaption {
  margin: 10px 0;
  font-size: 0.9em;
  padding: 0;
}
img.fluid-img {
  display: block;
  width: 100%;
  height: auto;
}

/* --------------------------------------------------------------
/* =SPACING
-------------------------------------------------------------- */
.m0 {
  margin: 0;
}
.mt0 {
  margin-top: 0;
}
.sm-mt {
  margin-top: 20px;
}
.md-mt {
  margin-top: 30px;
}
.lg-mt {
  margin-top: 40px;
}
.xl-mt {
  margin-top: 60px;
}
.mb0 {
  margin-bottom: 0;
}
.sm-mb {
  margin-bottom: 20px;
}
.md-mb {
  margin-bottom: 30px;
}
.lg-mb {
  margin-bottom: 40px;
}
.xl-mb {
  margin-bottom: 60px;
}


/* --------------------------------------------------------------
/* =GRID
-------------------------------------------------------------- */
.row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  -webkit-box-flex: 0;
  margin-left: 0;
  margin-right: 0;
}
.col-1-1 {
  flex-basis: 100%;
  max-width: 100%;
  padding-left: 2%;
  padding-right: 2%;
}
.col-1-2 {
  flex-basis: 50%;
  max-width: 50%;
  padding-left: 2%;
  padding-right: 2%;
}
.col-1-3 {
  flex-basis: 33.33%;
  max-width: 33.33%;
  padding-left: 2%;
  padding-right: 2%;
}
.col-1-4 {
  flex-basis: 25%;
  max-width: 25%;
  padding-left: 2%;
  padding-right: 2%;
}
.col-3-4 {
  flex-basis: 75%;
  max-width: 75%;
  padding-left: 2%;
  padding-right: 2%;
}
.col-2-3 {
  flex-basis: 66.66%;
  max-width: 66.66%;
  padding-left: 2%;
  padding-right: 2%;
}

/* --------------------------------------------------------------
/* =SMALL SCREENs AND TABLET
-------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
  .wrapper,
  .large-wrapper {
    width: 88%;
    margin: 0 6%;
  }
  .small-wrapper {
    width: 70%;
    margin: 0 15%;
  }
  .hidden-md {
    display: none !important;
  }
  .col-1-1 {
    flex-basis: 100%;
    max-width: 100%;
  }
  .col-1-2 {
    flex-basis: 50%;
    max-width: 50%;
  }
  .col-1-3 {
    flex-basis: 100%;
    max-width: 100%;
  }
  .col-1-4 {
    flex-basis: 50%;
    max-width: 50%;
  }
  .col-3-4 {
    flex-basis: 100%;
    max-width: 100%;
  }
  .col-2-3 {
    flex-basis: 100%;
    max-width: 100%;
  }
}

/* --------------------------------------------------------------
/* =SMARTPHONE
-------------------------------------------------------------- */
@media screen and (max-width: 600px) {
  .hidden-sm {
    display: none !important;
  }
  .small-wrapper {
    width: 88%;
    margin: 0 6%;
  }
  .col-1-2,
  .col-1-4 {
    flex-basis: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
}


@media screen and (min-width: 601px) {
  .only-sm {
    display: none !important;
  }
}

@media screen and (min-width: 1025px) {
  .only-md {
    display: none !important;
  }
}