html {
    font-size: 1em;
}
#wrap {
    position: relative;
}

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

.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;
}

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

/* Override base .btn styles */
/* Apply text and background changes to three key states: default, hover, and active (click). */
.btn-ql,
.btn-ql:hover,
.btn-ql:active {
    background-color: transparent;
    border: 2px solid transparent;
    color: @gray-light;
    border-radius: border-radius-base;
    font-size: 0.85714285714286em;
    font-weight: bold;
    .transition(~"translate 100ms ease-in-out, opacity 200ms ease-in-out");
    .transition(all 200ms);
    position: relative;
    overflow: hidden;
}

.btn-ql:hover {
    border-color: @gray-light2;
}

/* Apply the custom-colored gradients */
/* Note: you'll need to include all the appropriate gradients for various browsers and standards. */
.btn-ql > i {
    font-size: 1.16666666666667em;
    position: absolute;
    left: 44%;
    top: -2em;
    .animation(btn_in 300ms ease-in-out);
}
.btn-ql > span {
    .transition(all 100ms ease-in-out);
}

/*For special occacions */
.btn-ql > b.ql_sec_icon {
    font-size: 1.16666666666667em;
    font-weight: normal;
    position: absolute;
    left: 43%;
    top: 0.57142857142857em;
    .transition(all 200ms ease-in-out);
    .opacity(0);
}

.btn-ql.ql_show_sec > b.ql_sec_icon {
    .opacity(1);
}
.btn-ql.ql_show_sec > span,
.btn-ql.ql_show_sec > i {
    .opacity(0);
}

/* Set the hover state */
/* An easy hover state is just to move the gradient up a small amount. Add other embellishments as you see fit. */
.btn-ql:hover > span {
    .opacity(0);
}
.btn-ql:hover > i {
    top: 0.5625em;

    .animation(btn_out 300ms ease-in-out);
}

/*
Show the icon
*/
@-webkit-keyframes btn_out {
    0% {
        top: -2em;
    }
    100% {
        top: 0.71428571428571em;
    }
}
@-moz-keyframes btn_out {
    0% {
        top: -2em;
    }
    100% {
        top: 0.71428571428571em;
    }
}
@-o-keyframes btn_out {
    0% {
        top: -2em;
    }
    100% {
        top: 0.71428571428571em;
    }
}
@keyframes btn_out {
    0% {
        top: -2em;
    }
    100% {
        top: 0.71428571428571em;
    }
}

/*
Hide the icon
*/
@-webkit-keyframes btn_in {
    0% {
        top: 0.71428571428571em;
    }
    100% {
        top: 4em;
    }
}
@-moz-keyframes btn_in {
    0% {
        top: 0.71428571428571em;
    }
    100% {
        top: 4em;
    }
}
@-o-keyframes btn_in {
    0% {
        top: 0.71428571428571em;
    }
    100% {
        top: 4em;
    }
}
@keyframes btn_in {
    0% {
        top: 0.71428571428571em;
    }
    100% {
        top: 4em;
    }
}

.btn-ql:active {
    .translate(0; 1px);
    .box-shadow(none);
}

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

/*Hero Colors Classes													*/
/*----------------------------------------------------------------------*/
.hero_bck {
    background-color: @heroColor;
}

.hero_border {
    border-color: @heroColor;
}

.hero_color {
    color: @heroColor;
}

.hero_bck2 {
    background-color: @heroColor2;
}

.hero_border2 {
    border-color: @heroColor2;
}

.hero_color2 {
    color: @heroColor2;
}
.contrast_bck {
    background-color: @contrastColor;
}

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

/* Hover effect for thumbnails											*/
/*----------------------------------------------------------------------*/
.ql_thumbnail_hover {
    position: relative;
    display: block;
    text-align: center;
}
.ql_thumbnail_hover > span {
    display: block;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 5;
    background-color: rgba(255, 255, 255, 0.7);
    position: absolute;
    .transition(all 200ms linear);
    .opacity(0);
    border-radius: @border-radius-small;
}
.ql_thumbnail_hover:hover > span {
    .opacity(100);
}
.ql_thumbnail_hover > span > i {
    .transition(all 200ms ease-in-out);
    color: @gray;
    font-size: 3em;
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    margin-top: -1.5em;
    margin-left: -1.5em;
    line-height: 3em;
    width: 3em;
    height: 3em;
    .opacity(0);
    .scale(0);
    display: block;
}
.ql_thumbnail_hover:hover > span > i {
    .opacity(100);
    .scale(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;
}
input[type="submit"] {
    width: auto;
}
