/* Add here all your CSS customizations */
/* Box Shadow Effects /* ============================================================== */
.box {
    background:#fff;
    margin-top: 25px;
    padding:25px;
}
/*==============================stepwizard==================== * Effect 1 * ===============================================*/
.effect1 {
    -webkit-box-shadow:0 10px 6px -6px #777;
    -moz-box-shadow:0 10px 6px -6px #777;
    box-shadow: 0 10px 6px -6px #777;
}
/*================================================== * Effect 2 * ===============================================*/
.effect2 {
    position:relative;
}
.effect2:before,.effect2:after {
    z-index:-1;
    position:absolute;
    content:"";
    bottom:15px;
    left:10px;
    width:50%;
    top:80%;
    max-width:300px;
    background:#777;
    -webkit-box-shadow:0 15px 10px #777;
    -moz-box-shadow:0 15px 10px #777;
    box-shadow:0 15px 10px #777;
    -webkit-transform:rotate(-3deg);
    -moz-transform:rotate(-3deg);
    -o-transform:rotate(-3deg);
    -ms-transform:rotate(-3deg);
    transform:rotate(-3deg);
}
.effect2:after {
    -webkit-transform:rotate(3deg);
    -moz-transform:rotate(3deg);
    -o-transform:rotate(3deg);
    -ms-transform:rotate(3deg);
    transform:rotate(3deg);
    right:10px;
    left: auto;
}
/*================================================== * Effect 3 * ===============================================*/
.effect3 {
    position:relative;
}
.effect3:before {
    z-index:-1;
    position:absolute;
    content:"";
    bottom:15px;
    left:10px;
    width:50%;
    top:80%;
    max-width:300px;
    background:#777;
    -webkit-box-shadow:0 15px 10px #777;
    -moz-box-shadow:0 15px 10px #777;
    box-shadow:0 15px 10px #777;
    -webkit-transform:rotate(-3deg);
    -moz-transform:rotate(-3deg);
    -o-transform:rotate(-3deg);
    -ms-transform:rotate(-3deg);
    transform: rotate(-3deg);
}
/*================================================== * Effect 4 * ===============================================*/
.effect4 {
    position:relative;
}
.effect4:after {
    z-index:-1;
    position:absolute;
    content:"";
    bottom:15px;
    right:10px;
    left:auto;
    width:50%;
    top:80%;
    max-width:300px;
    background:#777;
    -webkit-box-shadow:0 15px 10px #777;
    -moz-box-shadow:0 15px 10px #777;
    box-shadow:0 15px 10px #777;
    -webkit-transform:rotate(3deg);
    -moz-transform:rotate(3deg);
    -o-transform:rotate(3deg);
    -ms-transform:rotate(3deg);
    transform: rotate(3deg);
}
/*================================================== * Effect 5 * ===============================================*/
.effect5 {
    position:relative;
}
.effect5:before,.effect5:after {
    z-index:-1;
    position:absolute;
    content:"";
    bottom:25px;
    left:10px;
    width:50%;
    top:80%;
    max-width:300px;
    background:#777;
    -webkit-box-shadow:0 35px 20px #777;
    -moz-box-shadow:0 35px 20px #777;
    box-shadow:0 35px 20px #777;
    -webkit-transform:rotate(-8deg);
    -moz-transform:rotate(-8deg);
    -o-transform:rotate(-8deg);
    -ms-transform:rotate(-8deg);
    transform:rotate(-8deg);
}
.effect5:after {
    -webkit-transform:rotate(8deg);
    -moz-transform:rotate(8deg);
    -o-transform:rotate(8deg);
    -ms-transform:rotate(8deg);
    transform:rotate(8deg);
    right:10px;
    left: auto;
}
/*================================================== * Effect 6 * ===============================================*/
.effect6 {
    position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
    -moz-box-shadow:0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
    box-shadow:0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
}
.effect6:before,.effect6:after {
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:50%;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
.effect6:after {
    right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
    -moz-transform:skew(8deg) rotate(3deg);
    -ms-transform:skew(8deg) rotate(3deg);
    -o-transform:skew(8deg) rotate(3deg);
    transform: skew(8deg) rotate(3deg);
}
/*================================================== * Effect 7 * ===============================================*/
.effect7 {
    position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
    -moz-box-shadow:0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
    box-shadow:0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
}
.effect7:before,.effect7:after {
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:0;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
.effect7:after {
    right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
    -moz-transform:skew(8deg) rotate(3deg);
    -ms-transform:skew(8deg) rotate(3deg);
    -o-transform:skew(8deg) rotate(3deg);
    transform: skew(8deg) rotate(3deg);
}
/*================================================== * Effect 8 * ===============================================*/
.effect8 {
    position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
    -moz-box-shadow:0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
    box-shadow:0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
}
.effect8:before,.effect8:after {
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:10px;
    bottom:10px;
    left:0;
    right:0;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
.effect8:after {
    right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
    -moz-transform:skew(8deg) rotate(3deg);
    -ms-transform:skew(8deg) rotate(3deg);
    -o-transform:skew(8deg) rotate(3deg);
    transform: skew(8deg) rotate(3deg);
}
/* =========================================================== */
/*=== Form Wizard===*/
.stepwizard-step p {
    margin-top: 10px;
}

.stepwizard-row {
    display: table-row;
}

.stepwizard {
    display: table;
    width: 100%;
    position: relative;
}

.stepwizard-step button[disabled] {
    opacity: 1 !important;
    filter: alpha(opacity=100) !important;
}

.stepwizard-row:before {
    top: 14px;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 100%;
    height: 1px;
    background-color: #ccc;
    z-order: 0;

}

.stepwizard-step {
    display: table-cell;
    text-align: center;
    position: relative;
}

.btn-circle {
    width: 30px;
    height: 30px;
    text-align: center;
    padding: 6px 0;
    font-size: 12px;
    line-height: 1.428571429;
    border-radius: 15px;
}
.form-bg{
    background:#fff;
    padding:25px;
}

.wrapper-checkboxes {
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #fff;
    left: 50%;
    position: absolute;
    text-align: center;
    top: 50%;
}

.checkbox, .checkbox-alt {
    background-color: #ED1D24;
    display: inline-block;
    height: 50px;
    margin: 0 0.25em;
    width: 100px;
}
.checkbox label, .checkbox-alt label {
    display: block;
    height: 50px;
    position: relative;
    width: 50px;
}
.checkbox label:after, .checkbox-alt label:after {
    /*
    This element has a border on the right, and top. By rotating it looks like a check symbol, but the wrong way. That's why I'm flipping it with scaleX(-1)
    */
    -moz-transform: scaleX(-1) rotate(135deg);
    -ms-transform: scaleX(-1) rotate(135deg);
    -webkit-transform: scaleX(-1) rotate(135deg);
    transform: scaleX(-1) rotate(135deg);
    /*
    I want to position the symbol using the left top, because when increasing the width and height of an object, it expands from the top left corner as well. That is what makes it looks like it's being drawn.
    */
    -moz-transform-origin: left top;
    -ms-transform-origin: left top;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    border-right: 4px solid #cee;
    border-top: 4px solid #cee;
    content: '';
    display: block;
    height: 20px;
    left: 14px;
    position: absolute;
    top: 26px;
    width: 10px;
}
.checkbox label:hover:after, .checkbox-alt label:hover:after {
    border-color: #bdd;
}
.checkbox input, .checkbox-alt input {
    display: none;
}
.checkbox input:checked + label:after, .checkbox-alt input:checked + label:after {
    -webkit-animation: check 0.8s;
    -moz-animation: check 0.8s;
    -o-animation: check 0.8s;
    animation: check 0.8s;
    border-color: #6aa;
}
.checkbox.checkbox-alt label:hover:after, .checkbox-alt.checkbox-alt label:hover:after {
    -webkit-animation: check 0.8s ease infinite;
    -moz-animation: check 0.8s ease infinite;
    -o-animation: check 0.8s ease infinite;
    animation: check 0.8s ease infinite;
}
.checkbox.checkbox-alt input:checked + label:after, .checkbox-alt.checkbox-alt input:checked + label:after {
    -webkit-animation: none;
    -moz-animation: none;
    -o-animation: none;
    animation: none;
}
/*pricing table*/
#pricing{
    width: 989px;
    margin: 100px auto;
    font-family: 'Open Sans', Helvetica;
}

.price_card{
    width: 300px;
    background: rgb(255, 255, 255);
    display: inline-table;
    top: 0;
}
.price_card:not(:last-child){
    margin-right: 40px;
}
.header{
    color: rgb(255, 255, 255);
}
.alpha .header{
    background: #cd7f32;
}
.bravo .header{
    background: #c0c0c0;
}
.charlie .header{
    background: #ffd700;
}
.platinum .header{
    background: #838383;
}
.price2{
    width: 100%;
    font-size: 60px;
    font-weight: 300;
    display: block;
    text-align: center;
    padding: 30px 0 10px;
}
.name{
    width: 100%;
    font-size: 15px;
    font-weight: 700;
    display: block;
    text-align: center;
    padding: 0 0 30px;
}
.features{
    list-style: none;
    text-align: center;
    color: rgb(138, 138, 138);
    margin: 0;
    padding: 0;
}
.features li{
    margin: 0 35px;
    padding: 20px 15px;
    width: 200px;
}
.features li:not(:last-child){
    border: 1px solid rgb(242, 242, 242);
    border-top: 0;
    border-left: 0;
    border-right: 0;
}
#pricing button{
    color: rgb(255, 255, 255);
    border: 0;
    border-radius: 5px;
    height: 40px;
    width: 200px;
    display: block;
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
    margin: 20px auto 35px;
}
.alpha button{
    background: #cd7f32;
}
.bravo button{
    background:  #c0c0c0;
}
.charlie button{
    background: #ffd700;
}
.charlie button{
    background: #838383;
}
.tip{
    font-family: 'Indie Flower';
    position: absolute;
    color: rgb(117, 117, 117);
    margin: 10px 5px;
}
/*Profile*/
.card-counter{
    box-shadow: 2px 2px 10px #DADADA;
    margin: 5px;
    padding: 20px 10px;
    background-color: #fff;
    height: 100px;
    border-radius: 5px;
    transition: .3s linear all;
}

.card-counter:hover{
    box-shadow: 4px 4px 20px #DADADA;
    transition: .3s linear all;
}

.card-counter.primary{
    background-color: #007bff;
    color: #FFF;
}

.card-counter.danger{
    background-color: #ef5350;
    color: #FFF;
}

.card-counter.success{
    background-color: #66bb6a;
    color: #FFF;
}

.card-counter.info{
    background-color: #26c6da;
    color: #FFF;
}

.card-counter i{
    font-size: 5em;
    opacity: 0.2;
}

.card-counter .count-numbers{
    position: absolute;
    right: 35px;
    top: 20px;
    font-size: 32px;
    display: block;
}

.card-counter .count-name{
    position: absolute;
    right: 35px;
    top: 65px;
    font-style: italic;
    text-transform: capitalize;
    opacity: 0.5;
    display: block;
    font-size: 18px;
}
/*Reveal*/
.reveal-if-active {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    font-size: 16px;
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    transition: 0.5s;
}
.reveal-if-active label {
    display: block;
    margin: 0 0 3px 0;
}
.reveal-if-active input[type=text] {
    width: 100%;
}
input[type="radio"]:checked ~ .reveal-if-active, input[type="checkbox"]:checked ~ .reveal-if-active {
    opacity: 1;
    max-height: 100px;
    padding: 10px 20px;
    -webkit-transform: scale(1);
    transform: scale(1);
    overflow: visible;
}