/* ==========================================================================
   Puerto Responsive Flat Buttons
   ========================================================================== */

/*
 *  Button 2
 */

.btn-standart {
    display: inline-block;
    position: relative;
    height: 30px;
    min-width: 170px;
    border: 0;
    text-align: left;
    outline: none;
    cursor:pointer;
}
.btn-standart span {
    display: inline-block;
    width: 30px;
    height: 30px;
    padding-left: 5px;
    color: #FFF;
    position: absolute;
    left: 0px;
    top: 0px;
    text-align: center;
    font-size: 16px;
    line-height: 2.0;
}

.btn-standart small {
    display: inline-block;
    color: #FFF;
    font-size: 14px;
    font-weight: bold;
    padding:3px 15px;
    margin-left: 35px;
}

/*
 * ANIMATIONS
 */

/*.btn-standart span i {
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}*/
/*.btn-standart:hover span i {
    -webkit-animation: move_from_top 300ms ease-in-out;
    -moz-animation: move_from_top 300ms ease-in-out;
    -ms-animation: move_from_top 300ms ease-in-out;
    -o-animation: move_from_top 300ms ease-in-out;
    animation: move_from_top 300ms ease-in-out;
}*/

/*.btn-standart: small {
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}*/
/*.btn-standart:hover small {
    -webkit-animation: move_from_left 300ms ease-in-out;
    -moz-animation: move_from_left 300ms ease-in-out;
    -ms-animation: move_from_left 300ms ease-in-out;
    -o-animation: move_from_left 300ms ease-in-out;
    animation: move_from_left 300ms ease-in-out;
}*/ 

/*
 * BORDER RADIUS
 */

.radius {
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

.radius:before, .radius span {
    border-radius: 3px 0 0 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px 0 0 3px;
}


/* ==========================================================================
   COLORS styles
   ========================================================================== */

/*
 * Color 3
 */ 

.btn-blue { background-color: #3498db; }
.btn-blue.puerto-btn-1:before,
.btn-blue.btn-standart span { background: #1B7CBD; }
.btn-blue.puerto-btn-1 span,
.btn-blue.puerto-btn-4 { color: #3498db; }
.btn-blue.btn-standart span:before { border-top-color: #1B7CBD; }
.btn-blue.puerto-btn-3 {border-bottom-color: #1B7CBD; }
.btn-blue.puerto-btn-4 {border-color: #3498db; }

/* ==========================================================================
   KEYFRAMES
   ========================================================================== */


@-webkit-keyframes move_from_top {
    from {
        opacity: 0;
        -webkit-transform: translateY(60%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}
@-moz-keyframes move_from_top {
    from {
        opacity: 0;
        -moz-transform: translateY(60%);
    }
    to {
        opacity: 1;
        -moz-transform: translateY(0%);
    }
}
@-ms-keyframes move_from_top {
    from {
        opacity: 0;
        -ms-transform: translateY(60%);
    }
    to {
        opacity: 1;
        -ms-transform: translateY(0%);
    }
}
@-o-keyframes move_from_top {
    from {
        opacity: 0;
        -o-transform: translateY(60%);
    }
    to {
        opacity: 1;
        -o-transform: translateY(0%);
    }
}


@-webkit-keyframes move_from_left {
    from {
        opacity: 0;
        -webkit-transform: translatex(-30%);
    }
    to {
        opacity: 1;
        -webkit-transform: translatex(0%);
    }
}
@-moz-keyframes move_from_left {
    from {
        opacity: 0;
        -moz-transform: translatex(-30%);
    }
    to {
        opacity: 1;
        -moz-transform: translatex(0%);
    }
}
@-ms-keyframes move_from_left {
    from {
        opacity: 0;
        -ms-transform: translatex(-30%);
    }
    to {
        opacity: 1;
        -ms-transform: translatex(0%);
    }
}
@-o-keyframes move_from_left {
    from {
        opacity: 0;
        -o-transform: translatex(-30%);
    }
    to {
        opacity: 1;
        -o-transform: translatex(0%);
    }
}
@keyframes move_from_left {
    from {
        opacity: 0;
        transform: translatex(-30%);
    }
    to {
        opacity: 1;
        transform: translatex(0%);
    }
}