@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700');

body { background: url(../img/bg.jpg) fixed center; background-repeat: no-repeat; font-family: 'Lato', sans-serif; }

.logo-header { background: #000; }
.logo { display: inline-block; }

.login-block { background: rgba(0,0,0,0.45); border-radius: 10px; color: #fff; padding: 40px; }
.login-block h1 { font-weight: bold; text-transform: uppercase; font-size: 24px;}

.btn-blue { color: #fff; border-color: #00ccff; background-color: #00ccff;
    background-image:
            linear-gradient(
                    to bottom,
                    #00ccff 50%,
                    #00b6e3 50%
            );
}
.btn-blue:hover { color: #fff; }
.btn-blue:hover > i::before { content: '\f3c1' }

.btn-link { color: #00ccff; }
.btn-link:hover { color: #00b6e3; }

.page-container { background: #f1f1f1; border: 1px solid #f2f2f2; border-radius: 3px; }

.content h1 { font-size: 30px; font-family: 'Lato', sans-serif; color: #00b6e3; margin: 0 0 35px 0; }
.content h2 { font-size: 24px; font-family: 'Lato', sans-serif; color: #00b6e3; margin: 0 0 29px 0; }
.content h3 { font-size: 20px; font-family: 'Lato', sans-serif; color: #00b6e3; margin: 0 0 25px 0; }
.content h4 { font-size: 18px; font-family: 'Lato', sans-serif; color: #000; margin: 0 0 23px 0; }
.content p { font-size: 18px; color: #000; line-height: 30px; margin: 0 0 23px 0; }
.content > ul li { font-size: 18px; color: #000; line-height: 30px; margin: 0 0 10px 0; }

.content > ul { list-style: none; }
.content > ul li::before { content: "\2022"; color: #00b6e3; font-weight: bold; display: inline-block; width: 1em; margin-left: -1em; }

.content section h1 { font-size: 24px; font-family: 'Lato', sans-serif; color: #618487; margin: 0 0 29px 0; }

a.custom-card { text-decoration: none; color: inherit; }
a.custom-card .card {transition: all .3s;}
a.custom-card:hover .card { border-color: #00b6e3; }


.fake-placeholder ~ input,
.fake-placeholder ~ select { position: relative; }
input + .fake-placeholder,
select + .fake-placeholder { font-size: 14px; position: absolute; top: -12px; left: 10px; background: #fff; color: rgba(0,0,0,0.5); padding: 0 4px }
select + .fake-placeholder { left: 28px; }

.btn-group-xs > .btn, .btn-xs {
    padding: .25rem .4rem;
    font-size: .875rem;
    line-height: .5;
    border-radius: .2rem;
}

/**
*** Custom Checkbox
***/
/* Customize the label (the container) */
.checkbox-container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    line-height: 23px;
}

/* Hide the browser's default checkbox */
.checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #fff;
    border: 1px solid #ccc;
}

/* On mouse-over, add a grey background color */
.checkbox-container:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkbox-container input:checked ~ .checkmark {
    background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.checkbox-container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.checkbox-container .checkmark:after {
    left: 9px;
    top: 6px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}