// --------------------------------------------------------------
// # Copyright (C) joomla-monster.com
// # License: http://www.joomla-monster.com/license.html Joomla-Monster Proprietary Use License
// # Website: http://www.joomla-monster.com
// # Support: info@joomla-monster.com
// ---------------------------------------------------------------

// ==========================================================================
// MODULE LAYOUT styles
// ==========================================================================
  
// grid extended
// --------------------------  

// default bootstrap size
.span0 {
  float: none !important;
}

// helper class for responsive layouts
.span50 {
  float: left !important;
  width: 50% !important;
}

// default module
// --------------------------

.jm-module {
  background-color: @JMmoduleBackground;
  border: 1px solid @JMmoduleBorder;
  color: @JMmoduleFontColor;
  padding: 30px;
  margin-bottom: @JMbaseSpace;
  .jm-title {
    font-family: @JMmoduleTitleFontFamily;
    font-size: @JMmoduleTitleFontSize;
    margin: 0 0 30px;
    font-weight: @JMmoduleTitleFontWeight;
    text-transform: uppercase;
  }
}

.moduletable {
  margin-bottom: @JMbaseSpace;
  > h3 {
    font-family: @JMmoduleTitleFontFamily;
    font-size: @JMmoduleTitleFontSize;
    margin: 0 0 30px;
    font-weight: @JMmoduleTitleFontWeight;
    text-transform: uppercase;
  }
}

// blank-ms module
// --------------------------

.jm-module.blank-ms {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
}

#jm-footer-mod .jm-module.blank-ms {
  color: inherit;
}

// testimonials-ms module
// --------------------------

.jm-module.testimonials-ms {
  background-image: url("../images/testimonials.png");
  background-repeat: no-repeat;
  background-position: center top;
  padding-top: 80px;
}

.jm-module.testimonials-ms.alternative-ms {
  background-image: url("../images/testimonials2.jpg");
}

// title-ms module
// --------------------------

.jm-module.title-ms {
  .jm-title {
    font-weight: @JMmoduleTitlemsFontWeight;
    color: @JMmoduleTitlemsFontColor;
  }
}

// no-margin-ms module
// --------------------------

.jm-module.nomargin-ms,
.jm-module-raw.nomargin-ms {
  margin: 0 !important;
}

// ==========================================================================
// CUSTOM HTML styles
// ==========================================================================

// contact icons
// --------------------------

.jm-contact-icons {
  list-style: none;
  margin: 0;
  display: inline-block;
  li {
    float: left;
    padding: 0 15px 0 0;
    img {
      margin-right: 10px;
    }
    a {
      vertical-align: middle;
      color: inherit;
    }
  }
}

// color boxes
// --------------------------

//color box 1
.jm-color-box1 {
  display: block;
  text-decoration: none !important;
  position: relative;
  z-index: 1;
  color: @JMcolorBoxFontColor;
  font-size: @JMcolorBoxFontSize;
  line-height: @JMcolorBoxLineHeight;
  padding: 30px;
  font-weight: normal;
  margin: 4px;
  .box-shadow(0 0 0 4px @JMcolorBox1Background);
  .transition(color 0.3s);
  .jm-icon-title {
    display: block;
    font-size: @JMcolorBoxTitleFontSize;
    line-height: @JMcolorBoxTitleLineHeight;
    margin-bottom: 30px;
    letter-spacing: 2px;
    font-family: @JMmoduleTitleFontFamily;
  }
  .jm-icon-image {
    display: block;
    background: url("../images/color-icon1.png") center top no-repeat;
    height: 97px;
    margin: 0 auto 30px;
  }
  .jm-icon-desc {
    display: block;
    .opacity(50);
  }
  &:hover {
    color: @JMcolorBox1Background;
    .jm-icon-image {
      background-position: center bottom;
    }
  }
  &:after {
    position: absolute;
    width: 100%;
    height: 100%;
    content: '';
    top: -2px;
    left: -2px;
    padding: 2px;
    z-index: -1;
    background: @JMcolorBox1Background;
    -webkit-transition: -webkit-transform 0.2s, opacity 0.3s;
    -moz-transition: -moz-transform 0.2s, opacity 0.3s;
    transition: transform 0.2s, opacity 0.3s;
  }
  &:hover:after {
    .scale(1.2);
    .opacity(0);
  }
}

//color box 2
.jm-color-box2 {
  display: block;
  text-decoration: none !important;
  position: relative;
  z-index: 1;
  color: @JMcolorBoxFontColor;
  font-size: @JMcolorBoxFontSize;
  line-height: @JMcolorBoxLineHeight;
  padding: 30px;
  font-weight: normal;
  margin: 4px;
  .box-shadow(0 0 0 4px @JMcolorBox2Background);
  .transition(color 0.3s);
  .jm-icon-title {
    display: block;
    font-size: @JMcolorBoxTitleFontSize;
    line-height: @JMcolorBoxTitleLineHeight;
    margin-bottom: 30px;
    letter-spacing: 2px;
    font-family: @JMmoduleTitleFontFamily;
  }
  .jm-icon-image {
    display: block;
    background: url("../images/color-icon2.png") center top no-repeat;
    height: 97px;
    margin: 0 auto 30px;
  }
  .jm-icon-desc {
    display: block;
    .opacity(50);
  }
  &:hover {
    color: @JMcolorBox2Background;
    .jm-icon-image {
      background-position: center bottom;
    }
  }
  &:after {
    position: absolute;
    width: 100%;
    height: 100%;
    content: '';
    top: -2px;
    left: -2px;
    padding: 2px;
    z-index: -1;
    background: @JMcolorBox2Background;
    -webkit-transition: -webkit-transform 0.2s, opacity 0.3s;
    -moz-transition: -moz-transform 0.2s, opacity 0.3s;
    transition: transform 0.2s, opacity 0.3s;
  }
  &:hover:after {
    .scale(1.2);
    .opacity(0);
  }
}

//color box 3
.jm-color-box3 {
  display: block;
  text-decoration: none !important;
  position: relative;
  z-index: 1;
  color: @JMcolorBoxFontColor;
  font-size: @JMcolorBoxFontSize;
  line-height: @JMcolorBoxLineHeight;
  padding: 30px;
  font-weight: normal;
  margin: 4px;
  .box-shadow(0 0 0 4px @JMcolorBox3Background);
  .transition(color 0.3s);
  .jm-icon-title {
    display: block;
    font-size: @JMcolorBoxTitleFontSize;
    line-height: @JMcolorBoxTitleLineHeight;
    margin-bottom: 30px;
    letter-spacing: 2px;
    font-family: @JMmoduleTitleFontFamily;
  }
  .jm-icon-image {
    display: block;
    background: url("../images/color-icon3.png") center top no-repeat;
    height: 97px;
    margin: 0 auto 30px;
  }
  .jm-icon-desc {
    display: block;
    .opacity(50);
  }
  &:hover {
    color: @JMcolorBox3Background;
    .jm-icon-image {
      background-position: center bottom;
    }
  }
  &:after {
    position: absolute;
    width: 100%;
    height: 100%;
    content: '';
    top: -2px;
    left: -2px;
    padding: 2px;
    z-index: -1;
    background: @JMcolorBox3Background;
    -webkit-transition: -webkit-transform 0.2s, opacity 0.3s;
    -moz-transition: -moz-transform 0.2s, opacity 0.3s;
    transition: transform 0.2s, opacity 0.3s;
  }
  &:hover:after {
    .scale(1.2);
    .opacity(0);
  }
}

#jm-offcanvas {
  .jm-color-box1,
  .jm-color-box2,
  .jm-color-box3 {
    &:hover:after {
      .scale(1.1);
    }
  }
}

// just few words module
// --------------------------

.jm-image-margin {
  margin-top: -@JMbaseSpace;
  margin-bottom: -@JMbaseSpace;
  margin-left: -@JMbaseSpace;
  margin-right: @JMbaseSpace;
  max-width: none;
}

ul.jm-custom-list {
  display: inline-block;
  li {
    background: url("../images/li-custom.png") no-repeat left 9px;
    padding: 9px 0 9px 40px;
  }
  ul {
    padding: 9px 0 0;
  }
  &.green {
    li {
      background: url("../images/li-custom-green.png") no-repeat left 9px;
    }
  }
}

.jm-table {
  display: table;
}

// social icons module
// --------------------------

.jm-socials {
  display: inline-block;
  width: 100%;
  a {
    float: left;
    display: block;
    height: @JMsocialIconsHeight;
    width: @JMsocialIconsWidth;
    margin: 0 10px 10px 0;
    background-repeat: no-repeat;
    background-position: left top;
    position: relative;
    top: 0;
    .transition(all 0.3s);
    &:hover {
      top: -5px;
      text-decoration: none;
      .opacity(80);
    }
    &.facebook {
      background-image: url("../images/facebook.png");
      background-color: @JMsocialIconsFacebookBackground;
    }
    &.googleplus {
      background-image: url("../images/googleplus.png");
      background-color: @JMsocialIconsGooglePlusBackground;
    }
    &.twitter {
      background-image: url("../images/twitter.png");
      background-color: @JMsocialIconsTwitterBackground;
    }
    &.linkedin {
      background-image: url("../images/linkedin.png");
      background-color: @JMsocialIconsLinkedInBackground;
    }
    &.skype {
      background-image: url("../images/skype.png");
      background-color: @JMsocialIconsSkypeBackground;
    }
    &.vimeo {
      background-image: url("../images/vimeo.png");
      background-color: @JMsocialIconsVimeoBackground;
    }
  }
}