﻿@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";

/**
 * parallax.css
 * @Author Original @msurguy -> http://bootsnipp.com/snippets/featured/parallax-login-form
 * @Reworked By @kaptenn_com 
 * @package PARALLAX LOGIN.
 */

body {
    background-color: #444;
    background: url(https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/Rp3ZIJe/natural-summer-bokeh-blur-background-with-green-leaves_sguq_ifs__F0000.png);
}

.form-horizontal .control-label {
    color: #666;
    font-size: 15px;
}


label {
 
    cursor: pointer;
    color: #666;
    font-size: 30px;
}



.form-signin input[type="text"] {
    margin-bottom: 5px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.form-signin input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.form-signin .form-control {
    position: relative;
    font-size: 16px;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    height: auto;
    padding: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.vertical-offset-100 {
    padding-top: 100px;
}

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
    margin: auto;
}

.panel {
    margin-bottom: 20px;
    background-color: rgba(255, 255, 255, 0.75);
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
input[type="checkbox"], input[type="radio"] {
    position: absolute;
    right: 9000px;
}

    /*Check box*/
    input[type="checkbox"] + .label-text:before {
        content: "\f096";
        font-family: "FontAwesome";
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        width: 1em;
        display: inline-block;
        margin-right: 5px;
    }

    input[type="checkbox"]:checked + .label-text:before {
        content: "\f14a";
        color: #e57d1a;
        animation: effect 250ms ease-in;
    }

    input[type="checkbox"]:disabled + .label-text {
        color: #aaa;
    }

        input[type="checkbox"]:disabled + .label-text:before {
            content: "\f0c8";
            color: #ccc;
        }

    /*Radio box*/

    input[type="radio"] + .label-text:before {
        content: "\f10c";
        font-family: "FontAwesome";
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        width: 1em;
        display: inline-block;
        margin-right: 5px;
    }

    input[type="radio"]:checked + .label-text:before {
        content: "\f192";
        color:  #aaa;
    }

        input[type="radio"]:disabled + .label-text:before {
            content: "\f111";
            color: #ccc;
        }

/*Radio Toggle*/

.toggle input[type="radio"] + .label-text:before {
    content: "\f204";
    font-family: "FontAwesome";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    width: 1em;
    display: inline-block;
    margin-right: 10px;
}

.toggle input[type="radio"]:checked + .label-text:before {
    content: "\f205";
    color: #e57d1a;
    animation: effect 250ms ease-in;
}

.toggle input[type="radio"]:disabled + .label-text {
    color: #aaa;
}

    /*.toggle input[type=;
    animation: effect 250ms ease-in;
}*/

.toggle input[type="radio"]:disabled + .label-text {
    color: #aaa;
}

    .toggle input[type="radio"]:disabled + .label-text:before {
        content: "\f204";
        color: #ccc;
    }


@keyframes effect {
    0% {
        transform: scale(0);
    }

    25% {
        transform: scale(1.3);
    }

    75% {
        transform: scale(1.4);
    }

    100% {
        transform: scale(1);
    }
}

