@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

@import 'base.less';

// essential CSS
* {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
}

.loading {
    background: rgba(255, 255, 255, 0.98);
    height    : 100%;
    width     : 100%;
    position  : fixed;
    z-index   : 9999;
    overflow  : hidden;

    p {

        font-size  : 2rem;
        position   : relative;
        font-weight: 700;
    }
}

.navbar {
    &-brand {
        img.logo {
            width: 200px;
        }
    }

    i {
        color: @primary-text-color;
    }

}

.form-control:focus {
    box-shadow: none;
    border    : 1px solid @primary-color;
}


.primary-btn{
    .primary-btn();
}

// parsleycss
input.parsley-success,
select.parsley-success,
textarea.parsley-success {
    color           : #468847;
    background-color: #DFF0D8;
    border          : 1px solid #D6E9C6;
}

input.parsley-error,
select.parsley-error,
textarea.parsley-error {
    color           : #B94A48;
    background-color: #F2DEDE;
    border          : 1px solid #EED3D7;
}

.parsley-errors-list {
    margin         : 8px 0 3px;
    padding        : 0;
    list-style-type: none;
    font-size      : 0.9em;
    line-height    : 0.9em;
    opacity        : 0;
    color          : #B94A48;

    transition        : all .3s ease-in;
    -o-transition     : all .3s ease-in;
    -moz-transition   : all .3s ease-in;
    -webkit-transition: all .3s ease-in;
}

.parsley-errors-list.filled {
    opacity: 1;
}

// essential CSS

section.header{
    .gradient();
}

section.intro{
    h1{
        font-weight: 700;
        font-size: 2rem;
        color: @primary-text-color;
    }

    p{
        .subhead{
            color: @secondary-text-color;
        }
    }
    ul{
        li{
            svg{
                width: 12px;
                margin-right: 1rem;
                vertical-align: baseline;
            }
        }

        li.active{
            font-size  : 115%;
            font-weight: 700;
            color      : #bf283e;
            svg{
                width: 12px;
                margin-right: 1rem;
                vertical-align: baseline;
                fill: #bf283e;
            }
        }
    }
    .sideimg{
        height: 275px;
    }
}

section.contact{
    strong{
        color: @primary-color;
    }
    a{
        color: @primary-text-color;
    }
    p, a, input, button{
        font-size: 0.8rem;
    }
    input{
        height: 20px;
    }

}