html{font-size: 1em;}


h1, h2, h3, h4, h5, h6{
	margin-top: 0;
}
img{
	max-width: 100%;
	height: auto;
}

.icons-bck{
  position: absolute;
  top: 90px;
  left: 50%;
  .translate(-50%; 0);

}

/* Section Title
-------------------------------------------------- */
.style-title{
    color: #fff;
    text-transform: uppercase;
    .font-size(48);

    span{
      font-family: "Dancing Script";
      text-transform: capitalize;
      color: @heroColor;
      display: block;
      .font-size(50);
    }
    a{
      color: #fff;
      text-decoration: none;

        span{
          font-family: "Dancing Script";
          text-transform: capitalize;
          color: @heroColor;
          display: block;
          .font-size(50);
        }
    }
}


.preloader { 
	background:@body-bg; 
	position: absolute;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 30;
	top: 0;
	left: 0;
	.transition( all 900ms ease-in-out);
	text-align: center;
	color: @gray-light2!important;
}
.preloader i { 
	font-size: 28px;
	position: absolute;
	left: 50%;
	top: 300px;
}


/* Read More Button
-------------------------------------------------- */
.read-more{
  text-transform: uppercase;
  margin-top: 10px;
  display: inline-block;
  padding: 5px 0;
  color: @heroColor;
  position: relative;
  i{
    margin-left: 10px;
    .font-size(14);
    position: relative;
    top: -1px;
    color: inherit;
  }

  &:hover{
    text-decoration: none;
  }
  &:after{
    position: absolute;
    left: 0;
    bottom: 0;
    .transition(all 250ms);
    content: " ";
    display: block;
    width: 0;
    height: 1px;
    background-color: @heroColor;
  }
  &:hover:after{
    width: 100%;
  }
}



.ql_background{
  .transition(all 300ms);
  .ql_shadow;
  background-color: #fff;
  padding: 3.75rem;
}
.ql_shadow{
  .box-shadow( 0 0 40px rgba(0,0,0,0.6) );
}

/* Custom button
-------------------------------------------------- */

/*
Light Button
---------------------------------------*/
.light-btn{
  background-color: transparent;
  border: 2px solid #000;
  display: inline-block;
  color: #000;
  text-transform: uppercase;
  padding: 8px 24px;
  //font-weight: bold;
  .transition(~"background 200ms, color 200ms");
  letter-spacing: 0.7px;

  &:hover{
    text-decoration: none;
    background-color: #000;
    border-color: #000;
    color: #fff;
    text-shadow: none;
  }
  &:active{
    position: relative;
    bottom: -1px;
    text-decoration: none;
    background-color: transparent;
    color: #000;
  }
}



.transition-duration(@transition-duration) {
  -webkit-animation-duration: @transition-duration;
  -moz-animation-duration: @transition-duration;
  -o-animation-duration: @transition-duration;
  animation-duration: @transition-duration;
}





/* Make Space between sections											*/
/*----------------------------------------------------------------------*/
.clear_space{
	margin: 2.30769230769231em 0;
}






/* Hover effect for thumbnails											*/
/*----------------------------------------------------------------------*/
.ql_thumbnail_hover{
	position: relative;
	display: block;
	text-align: center;
  overflow: hidden;
  &:before{
    content: " ";
  	display: block;
  	top: 5px;
  	left: 5px;
  	right: 5px;
  	bottom: 5px;
  	z-index: 1;
  	background-color: rgba(0,0,0,0.7);
  	position: absolute;
  	.transition( all 200ms );
  	opacity: 0;
  	border-radius: @border-radius-small;
  }
  &:hover:before{
    opacity: 1;
  }
  &:after{
    .transition(all 200ms);
    .transition-delay(100ms);
    .translate(-50%;-50%);
    opacity: 0;
    display: block;
    z-index: 2;
    position: absolute;
    top: 45%;
    left: 50%;
    content: "+";
    color: #fff;
    font: bold 14px/1 FontAwesome;
    .font-size(62);
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  &:hover:after{
    top: 50%;
    opacity: 1;
  }
  img{
    .transition( transform 800ms );
  }
  &:hover img{
    .scale(1.1);
  }
}





/* Font size using REMs													*/
/*----------------------------------------------------------------------*/
.font-size(@size: 14){
	font-size: unit(@size, px);
	font-size: unit(@size / @font-size-base, rem); //Bootstrap variable
}










/* Inputs																*/
/*----------------------------------------------------------------------*/
input, textarea{
	display: block;
  width: 100%;
  height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
  padding: @padding-base-vertical @padding-base-horizontal;
  font-size: @font-size-base;
  line-height: @line-height-base;
  color: @input-color;
  vertical-align: middle;
  background-color: @input-bg;
  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
  border: 2px solid @input-border;
  border-radius: @input-border-radius;
  margin-bottom: 0.71428571428571em;


  // Customize the `:focus` state to imitate native WebKit styles.
  .form-control-focus();

  // Placeholder
  //
  // Placeholder text gets special styles because when browsers invalidate entire
  // lines if it doesn't understand a selector/
  .placeholder();

  // Disabled and read-only inputs
  // Note: HTML5 says that controls under a fieldset > legend:first-child won't
  // be disabled if the fieldset is disabled. Due to implementation difficulty,
  // we don't honor that edge case; we style them as disabled anyway.
  &[disabled],
  &[readonly],
  fieldset[disabled] & {
    cursor: not-allowed;
    background-color: @input-bg-disabled;
}

  // Reset height for `textarea`s
  textarea& {
    height: auto;
}
}
textarea{
	min-height: 100px;
}


