/*
    =============================
    |     |\  888888    \    O  |
    |     | 88888888888 o\ oo   |
    |     | 88888888888 -/      |
    |     |/  8888888           |
    =============================

    @Authour    : Syed Ahmed Shah
    @Trout CSS  : v1.0.0
    @Created at : 30/10/2017

*/

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,800');

html,
body {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 100%;
}

h1,h2,h3,h4,h5,h6,
p,
a,
span,
i, b, hr { 
    margin: 0;
    padding: 0;
}

h1 { font-size: 2.250em; }

h2 { font-size: 1.875em; }

h3 { font-size: 1.625em; }

h4 { font-size: 1.250em; }

h5 { font-size: 1.000em; }

h6,
p,
a,
span { font-size: 0.875em; }

i { font-size: 0.750em; }

h1,h2,h3,h4,h5,h6,
p,
a,
span,
i { color: #585858; }

a,
a:hover,
a:focus,
a:active,
a:target {
    text-decoration: none;
    outline: none;
    cursor: pointer;
}

.border { border: 2px dashed brown; }

.img-responsive { width: 100%; height: auto; }

.img-rounded { border-radius: 4px; }

.rounded-corners-light { border-radius: 2px; }

.rounded-corners-medium { border-radius: 4px; }

.rounded-corners-heavy { border-radius: 8px; }

.text-center { text-align: center; }
.text-right { text-align: right; }

.pull-right { float: right; }

.pull-left { float: left; }

.hz-separator { 
    width: 100%; 
    height: 5px;
    border-top: 1px solid #c3c3c3;
}

.vt-separator {
    width: 100%; 
    height: 5px;
    border-top: 1px solid #c3c3c3;
}
.normal-light-bold { font-weight: 400; }

.normal-bold { font-weight: 600; }

.parsley-errors-list {
    margin: 0
}

.parsley-errors-list.filled {
    position: absolute;
    left: 100%;
    top: 0;
    margin: 0;
    padding: 8px 18px 7px;
    font-size: 16px;
    font-weight: 400;
    white-space: nowrap;
    background-color: #e05a5a;
    list-style: none;
    color: #ffffff;
    z-index: 1;
    border-radius: 4px
}

.parsley-errors-list.filled:before {
    position: absolute;
    top: 50%;
    left: -8px;
    margin-top: -8px;
    display: block;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid #e05a5a;
    content: ''
}

.parsley-errors-list.filled {
    left: auto;
    right: 100%;
    margin-left: 0
}

.parsley-errors-list.filled:before {
    display: none
}

.parsley-errors-list.filled:after {
    position: absolute;
    top: 50%;
    right: -8px;
    margin-top: -8px;
    display: block;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid #e05a5a;
    content: ''
}

.form-field.half ~ .half .parsley-errors-list.filled {
    left: 100%  !important;
    right: auto !important;
    margin-left: 10px !important;
}

.form-field.half ~ .half .parsley-errors-list.filled:after { display: none !important; }

.form-field.half ~ .half .parsley-errors-list.filled:before {
    position: absolute !important;
    top: 50% !important;
    left: -8px !important;
    margin-top: -8px !important;
    display: block !important;
    border-top: 8px solid transparent !important;
    border-bottom: 8px solid transparent !important;
    border-right: 8px solid #e05a5a !important;
    content: '' !important;
}

@media (max-width: 919px) {
    form#pardot-form.form .form-field .parsley-errors-list.filled {
        position: relative !important;
        left: 0 !important;
        right: auto !important;
        padding: 0 0 !important;
        margin: 10px 0 -5px !important;
        font-size: 1rem !important;
        white-space: normal !important;
        text-align: left !important;
        color: #e05a5a !important;
        background-color: transparent !important;
    }

    form#pardot-form.form .form-field .parsley-errors-list.filled:before,
    form#pardot-form.form .form-field .parsley-errors-list.filled:after { display: none !important; }

    .form-field.half ~ .half .parsley-errors-list.filled:before, 
    .form-field.half ~ .half .parsley-errors-list.filled:after { display: none !important; }
}

@media only screen and (min-width: 320px) {
    .container-fluid {
        width: 100%;
        height: auto;
        padding: 15px 12px;
    }

    .container {
        width: 100%;
        height: auto;
        padding: 0 15px;
    }

    .col {
        padding: 0 12px;
        height: auto;
    }

    .col.col-10 { width: 100%; }

    .col.col-9 { width: 90%; }

    .col.col-8 { width: 80%; }

    .col.col-7 { width: 70%; }

    .col.col-6 { width: 60%; }

    .col.col-5 { width: 50%; }

    .col.col-4 { width: 40%; }

    .col.col-3 { width: 30%; }

    .col.col-2 { width: 20%; }

    .col.col-1 { width: 10%; }
}

@media only screen and (min-width: 425px) {
    .container { padding: 0 20px; }
}

@media only screen and (min-width: 768px) {
    .container { width: 780px; }

    .col { float: left; }
}

@media only screen and (min-width: 920px) {
    .container { width: 980px; }

    .row {
        display: block;
        width: 100%;
        height: auto;
        margin: 0;
    }
}

@media only screen and (min-width: 1200px) {
    .container { width: 1080px; }
}

@media only screen and (min-width: 2020px) {

}