/*
 # Website Base Grid Layout v2.0
  ```
 <div class="row-fluid">
    <div class="span-12">               

        <a id="grid-layout"></a>
        <h2>Setting up a basic Grid layout</h2>

        <div class="grid-examples">
            <h3>Simple</h3>
            <div class="row-fluid grid-examples">
                <div class="span-6">span-6</div>
                <div class="span-6">span-6</div>
            </div>

            <h3>Mixed grid layout</h3>
            <div class="row-fluid grid-examples">
                <div class="span-3 span-6-sm">span-3 span-6-sm</div>
                <div class="span-3 span-6-sm">span-3 span-6-sm</div>
                <div class="span-3 span-6-sm">span-3 span-6-sm</div>
                <div class="span-3 span-6-sm">span-3 span-6-sm</div>
            </div>

            <h3>Offset</h3>                
            <div class="row-fluid grid-examples
                <div class="span-10 span-offset-1">span-10 span-offset-1</div>
            </div>                

            <div class="row-fluid grid-examples">
                <div class="span-10-sm span-offset-1-sm">span-10-sm span-offset-1-sm</div>
            </div>                


            <h3>Nested</h3>              
            <div class="row-fluid grid-examples">
                <div class="span-10 span-offset-1">span-10 span-offset-1
                    <div class="row-fluid">
                        <div class="span-4">span-4</div>
                        <div class="span-4">span-4</div>
                        <div class="span-4">span-4</div>
                    </div>
                </div>
            </div>                

            <a id="grid-equal-height"></a>
            <h3>Equal heights</h3>
            <div class="row-fluid equal-height-desktop grid-examples">
                <div class="span-4">span-4</div>
                <div class="span-4">span-4<br /><br />long</div>
                <div class="span-4">span-4</div>                
            </div>

            <a id="grid-vertical-align"></a>
            <h3>Vertical Align</h3>                                
            <div class="row-fluid vertical-align-desktop grid-examples">
                <div class="span-4">span-4</div>
                <div class="span-4">span-4<br /><br />long</div>
                <div class="span-4">span-4</div>
            </div>

            <h3>No Stack</h3>
            <div class="row-fluid no-stack grid-examples">
                <div class="span-2">span-2</div>
                <div class="span-2">span-2</div>
                <div class="span-2">span-2</div>
                <div class="span-2">span-2</div>
                <div class="span-2">span-2</div>
            </div>

            <div class="row-fluid grid-examples">
                <div class="span-1">span-1</div>
                <div class="span-1">span-1</div>
                <div class="span-1">span-1</div>
                <div class="span-1">span-1</div>
                <div class="span-1">span-1</div>
                <div class="span-1">span-1</div>
                <div class="span-1">span-1</div>
                <div class="span-1">span-1</div>
                <div class="span-1">span-1</div>
                <div class="span-1">span-1</div>
                <div class="span-1">span-1</div>
                <div class="span-1">span-1</div>
            </div>

             <div class="row-fluid grid-examples">
                <div class="span-1"><div>span-1</div></div>
                <div class="span-1"><div>span-1</div></div>
                <div class="span-1"><div>span-1</div></div>
                <div class="span-1"><div>span-1</div></div>
                <div class="span-1"><div>span-1</div></div>
                <div class="span-1"><div>span-1</div></div>
                <div class="span-1"><div>span-1</div></div>
                <div class="span-1"><div>span-1</div></div>
                <div class="span-1"><div>span-1</div></div>
                <div class="span-1"><div>span-1</div></div>
                <div class="span-1"><div>span-1</div></div>
                <div class="span-1"><div>span-1</div></div>
            </div>
        </div>
    </div>
</div>
 ```
*/

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

    *:before,
    *:after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

.container, figcaption.container, .container .container figcaption {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    float: none;
}

}

@media (min-width: 768px) {
    figcaption.container, .container {
        width: 750px;
    }
}

@media (min-width: 992px) {
    figcaption.container, .container {
        width: 970px;
    }
}

@media (min-width: 1200px) {
    figcaption.container, .container {
        width: 1600px;
        max-width: 100%;
    }
}


.container:before, .container:after, .row-fluid:before, .row-fluid:after {
    display: table;
    content: " ";
}

.container:after, .row-fluid:after {
    clear: both;
}


@media (min-width:768px) {
    .container.full-screen {
        width: 100% !important;
        padding: 0;
    }

        .container.full-screen > .row-fluid {
            margin-right: 0;
            margin-left: 0;
        }
}

.row-fluid {
    margin-right: -15px;
    margin-left: -15px;
    margin-bottom: 1em;
}

.span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12,
.span-1-m, .span-2-m, .span-3-m, .span-4-m, .span-5-m, .span-6-m, .span-7-m, .span-8-m, .span-9-m, .span-10-m, .span-11-m, .span-12-m,
.span-1-sm, .span-2-sm, .span-3-sm, .span-4-sm, .span-5-sm, .span-6-sm, .span-7-sm, .span-8-sm, .span-9-sm, .span-10-sm, .span-11-sm, .span-12-sm,
.span-1-md, .span-2-md, .span-3-md, .span-4-md, .span-5-md, .span-6-md, .span-7-md, .span-8-md, .span-9-md, .span-10-md, .span-11-md, .span-12-md,
.span-1-lg, .span-2-lg, .span-3-lg, .span-4-lg, .span-5-lg, .span-6-lg, .span-7-lg, .span-8-lg, .span-9-lg, .span-10-lg, .span-11-lg, .span-12-lg {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.span-full {
    margin: 0;
    padding: 0;
    width: 100%;
}

.row-fluid img,
[class*=span-] img {
    width: 100%;
}


.no-stack .span-1, .no-stack .span-2, .no-stack .span-3, .no-stack .span-4, .no-stack .span-5, .no-stack .span-6, .no-stack .span-7, .no-stack .span-8, .no-stack .span-9, .no-stack .span-10, .no-stack .span-11, .no-stack .span-12 {
    float: left;
}

.no-stack .span-12 {
    width: 100%;
}

.no-stack .span-11 {
    width: 91.66666667%;
}

.no-stack .span-10 {
    width: 83.33333333%;
}

.no-stack .span-9 {
    width: 75%;
}

.no-stack .span-8 {
    width: 66.66666667%;
}

.no-stack .span-7 {
    width: 58.33333333%;
}

.no-stack .span-6 {
    width: 50%;
}

.no-stack .span-5 {
    width: 41.66666667%;
}

.no-stack .span-4 {
    width: 33.33333333%;
}

.no-stack .span-3 {
    width: 25%;
}

.no-stack .span-2 {
    width: 16.66666667%;
}

.no-stack .span-1 {
    width: 8.33333333%;
}

.no-stack .span-offset-12 {
    margin-left: 100%;
}

.no-stack .span-offset-11 {
    margin-left: 91.66666667%;
}

.no-stack .span-offset-10 {
    margin-left: 83.33333333%;
}

.no-stack .span-offset-9 {
    margin-left: 75%;
}

.no-stack .span-offset-8 {
    margin-left: 66.66666667%;
}

.no-stack .span-offset-7 {
    margin-left: 58.33333333%;
}

.no-stack .span-offset-6 {
    margin-left: 50%;
}

.no-stack .span-offset-5 {
    margin-left: 41.66666667%;
}

.no-stack .span-offset-4 {
    margin-left: 33.33333333%;
}

.no-stack .span-offset-3 {
    margin-left: 25%;
}

.no-stack .span-offset-2 {
    margin-left: 16.66666667%;
}

.no-stack .span-offset-1 {
    margin-left: 8.33333333%;
}

.no-stack .span-offset-0 {
    margin-left: 0;
}

@media (max-width: 767px) {

    .span-1-m, .span-2-m, .span-3-m, .span-4-m, .span-5-m, .span-6-m, .span-7-m, .span-8-m, .span-9-m, .span-10-m, .span-11-m, .span-12-m {
        float: left;
    }

    .span-12-m {
        width: 100%;
    }

    .span-11-m {
        width: 91.66666667%;
    }

    .span-10-m {
        width: 83.33333333%;
    }

    .span-9-m {
        width: 75%;
    }

    .span-8-m {
        width: 66.66666667%;
    }

    .span-7-m {
        width: 58.33333333%;
    }

    .span-6-m {
        width: 50%;
    }

    .span-5-m {
        width: 41.66666667%;
    }

    .span-4-m {
        width: 33.33333333%;
    }

    .span-3-m {
        width: 25%;
    }

    .span-2-m {
        width: 16.66666667%;
    }

    .span-1-m {
        width: 8.33333333%;
    }

    .span-offset-12-m {
        margin-left: 100%;
    }

    .span-offset-11-m {
        margin-left: 91.66666667%;
    }

    .span-offset-10-m {
        margin-left: 83.33333333%;
    }

    .span-offset-9-m {
        margin-left: 75%;
    }

    .span-offset-8-m {
        margin-left: 66.66666667%;
    }

    .span-offset-7-m {
        margin-left: 58.33333333%;
    }

    .span-offset-6-m {
        margin-left: 50%;
    }

    .span-offset-5-m {
        margin-left: 41.66666667%;
    }

    .span-offset-4-m {
        margin-left: 33.33333333%;
    }

    .span-offset-3-m {
        margin-left: 25%;
    }

    .span-offset-2-m {
        margin-left: 16.66666667%;
    }

    .span-offset-1-m {
        margin-left: 8.33333333%;
    }

    .span-offset-0-m {
        margin-left: 0;
    }
}

@media (min-width: 768px) {
    .span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12 {
        float: left;
    }

    .span-12 {
        width: 100%;
    }

    .span-11 {
        width: 91.66666667%;
    }

    .span-10 {
        width: 83.33333333%;
    }

    .span-9 {
        width: 75%;
    }

    .span-8 {
        width: 66.66666667%;
    }

    .span-7 {
        width: 58.33333333%;
    }

    .span-6 {
        width: 50%;
    }

    .span-5 {
        width: 41.66666667%;
    }

    .span-4 {
        width: 33.33333333%;
    }

    .span-3 {
        width: 25%;
    }

    .span-2 {
        width: 16.66666667%;
    }

    .span-1 {
        width: 8.33333333%;
    }

    .span-offset-12 {
        margin-left: 100%;
    }

    .span-offset-11 {
        margin-left: 91.66666667%;
    }

    .span-offset-10 {
        margin-left: 83.33333333%;
    }

    .span-offset-9 {
        margin-left: 75%;
    }

    .span-offset-8 {
        margin-left: 66.66666667%;
    }

    .span-offset-7 {
        margin-left: 58.33333333%;
    }

    .span-offset-6 {
        margin-left: 50%;
    }

    .span-offset-5 {
        margin-left: 41.66666667%;
    }

    .span-offset-4 {
        margin-left: 33.33333333%;
    }

    .span-offset-3 {
        margin-left: 25%;
    }

    .span-offset-2 {
        margin-left: 16.66666667%;
    }

    .span-offset-1 {
        margin-left: 8.33333333%;
    }

    .span-offset-0 {
        margin-left: 0;
    }

    .span-1-sm, .span-2-sm, .span-3-sm, .span-4-sm, .span-5-sm, .span-6-sm, .span-7-sm, .span-8-sm, .span-9-sm, .span-10-sm, .span-11-sm, .span-12-sm {
        float: left;
    }

    .span-12-sm {
        width: 100%;
    }

    .span-11-sm {
        width: 91.66666667%;
    }

    .span-10-sm {
        width: 83.33333333%;
    }

    .span-9-sm {
        width: 75%;
    }

    .span-8-sm {
        width: 66.66666667%;
    }

    .span-7-sm {
        width: 58.33333333%;
    }

    .span-6-sm {
        width: 50%;
    }

    .span-5-sm {
        width: 41.66666667%;
    }

    .span-4-sm {
        width: 33.33333333%;
    }

    .span-3-sm {
        width: 25%;
    }

    .span-2-sm {
        width: 16.66666667%;
    }

    .span-1-sm {
        width: 8.33333333%;
    }

    .span-offset-12-sm {
        margin-left: 100%;
    }

    .span-offset-11-sm {
        margin-left: 91.66666667%;
    }

    .span-offset-10-sm {
        margin-left: 83.33333333%;
    }

    .span-offset-9-sm {
        margin-left: 75%;
    }

    .span-offset-8-sm {
        margin-left: 66.66666667%;
    }

    .span-offset-7-sm {
        margin-left: 58.33333333%;
    }

    .span-offset-6-sm {
        margin-left: 50%;
    }

    .span-offset-5-sm {
        margin-left: 41.66666667%;
    }

    .span-offset-4-sm {
        margin-left: 33.33333333%;
    }

    .span-offset-3-sm {
        margin-left: 25%;
    }

    .span-offset-2-sm {
        margin-left: 16.66666667%;
    }

    .span-offset-1-sm {
        margin-left: 8.33333333%;
    }

    .span-offset-0-sm {
        margin-left: 0;
    }
}

@media (min-width:992px) {
    .span-1-md, .span-2-md, .span-3-md, .span-4-md, .span-5-md, .span-6-md, .span-7-md, .span-8-md, .span-9-md, .span-10-md, .span-11-md, .span-12-md {
        float: left;
    }

    .span-12-md {
        width: 100%;
    }

    .span-11-md {
        width: 91.66666667%;
    }

    .span-10-md {
        width: 83.33333333%;
    }

    .span-9-md {
        width: 75%;
    }

    .span-8-md {
        width: 66.66666667%;
    }

    .span-7-md {
        width: 58.33333333%;
    }

    .span-6-md {
        width: 50%;
    }

    .span-5-md {
        width: 41.66666667%;
    }

    .span-4-md {
        width: 33.33333333%;
    }

    .span-3-md {
        width: 25%;
    }

    .span-2-md {
        width: 16.66666667%;
    }

    .span-1-md {
        width: 8.33333333%;
    }

    .span-offset-12-md {
        margin-left: 100%;
    }

    .span-offset-11-md {
        margin-left: 91.66666667%;
    }

    .span-offset-10-md {
        margin-left: 83.33333333%;
    }

    .span-offset-9-md {
        margin-left: 75%;
    }

    .span-offset-8-md {
        margin-left: 66.66666667%;
    }

    .span-offset-7-md {
        margin-left: 58.33333333%;
    }

    .span-offset-6-md {
        margin-left: 50%;
    }

    .span-offset-5-md {
        margin-left: 41.66666667%;
    }

    .span-offset-4-md {
        margin-left: 33.33333333%;
    }

    .span-offset-3-md {
        margin-left: 25%;
    }

    .span-offset-2-md {
        margin-left: 16.66666667%;
    }

    .span-offset-1-md {
        margin-left: 8.33333333%;
    }

    .span-offset-0-md {
        margin-left: 0;
    }
}

@media (min-width: 1200px) {

    .span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12 {
        float: left;
    }

    .span-12 {
        width: 100%;
    }

    .span-11 {
        width: 91.66666667%;
    }

    .span-10 {
        width: 83.33333333%;
    }

    .span-9 {
        width: 75%;
    }

    .span-8 {
        width: 66.66666667%;
    }

    .span-7 {
        width: 58.33333333%;
    }

    .span-6 {
        width: 50%;
    }

    .span-5 {
        width: 41.66666667%;
    }

    .span-4 {
        width: 33.33333333%;
    }

    .span-3 {
        width: 25%;
    }

    .span-2 {
        width: 16.66666667%;
    }

    .span-1 {
        width: 8.33333333%;
    }

    .span-1-lg, .span-2-lg, .span-3-lg, .span-4-lg, .span-5-lg, .span-6-lg, .span-7-lg, .span-8-lg, .span-9-lg, .span-10-lg, .span-11-lg, .span-12-lg {
        float: left;
    }

    .span-12-lg {
        width: 100%;
    }

    .span-11-lg {
        width: 91.66666667%;
    }

    .span-10-lg {
        width: 83.33333333%;
    }

    .span-9-lg {
        width: 75%;
    }

    .span-8-lg {
        width: 66.66666667%;
    }

    .span-7-lg {
        width: 58.33333333%;
    }

    .span-6-lg {
        width: 50%;
    }

    .span-5-lg {
        width: 41.66666667%;
    }

    .span-4-lg {
        width: 33.33333333%;
    }

    .span-3-lg {
        width: 25%;
    }

    .span-2-lg {
        width: 16.66666667%;
    }

    .span-1-lg {
        width: 8.33333333%;
    }
}


.hide-m {
    display: block;
}

.hide-sm {
    display: block;
}

.hide-md {
    display: block;
}

.hide-lg {
    display: block;
}

@media (max-width: 767px) {
    .hide-m {
        display: none;
    }
}

@media (min-width: 768px) and (max-width:991px) {
    .hide-sm {
        display: none;
    }
}

@media (min-width: 992px) and (max-width:1199px) {
    .hide-md {
        display: none;
    }
}

@media (min-width: 1200px) {
    .hide-lg {
        display: none;
    }
}


@media (min-width: 1200px) {
    .hide-lg {
        display: none;
    }
}

.vertical-align {
    align-items: center;
    justify-content: center;
    flex-direction: row;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

@media (min-width: 768px) {
    .vertical-align-sm {
        align-items: center;
        justify-content: center;
        flex-direction: row;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
    }
}

@media (min-width: 992px) {
    .vertical-align-md {
        align-items: center;
        justify-content: center;
        flex-direction: row;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
    }
}


/*
# Responsive Tables - Grid to List
```
   <div class="grid-to-list">
        <table class="span-12" border="1">
            <thead>
                <tr><th>Parameter</th>
                <th>Type</th>
                <th>Default Value</th>
                <th>Example</th>
                <th>Description</th>
            </tr></thead>
            <tbody>
                <tr>
                    <td data-title="Parameter">expandClass</td>
                    <td data-title="Type">string</td>
                    <td data-title="Default Example">.expand</td>
                    <td data-title="Example">.class-name</td>
                    <td data-title="Description">This is the css class that is set to the object that will expand the menu</td>
                </tr>
                <tr>
                    <td data-title="Parameter">collapseClass</td>
                    <td data-title="Type">string</td>
                    <td data-title="Default Example">.collapse</td>
                    <td data-title="Example">.class-name</td>
                    <td data-title="Description">This is the css class to collapse/close/hide the menu</td>
                </tr>                
            </tbody>
        </table>
    </div> 
```
*/
@media only screen and (max-width: 767px) {

    /* Force table to not be like tables anymore */
    .grid-to-list table,
    .grid-to-list thead,
    .grid-to-list tbody,
    .grid-to-list th,
    .grid-to-list td,
    .grid-to-list tr {
        display: block;
    }

        /* Hide table headers (but not display: none;, for accessibility) */
        .grid-to-list thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

    .grid-to-list tr {
        border-bottom: 1px solid #ccc;
        padding-bottom: .5em;
    }

    .grid-to-list td { /* Behave  like a "row" */
        border: none;
        position: relative;
        padding-left: 50%;
        white-space: normal;
        text-align: left;
    }

        .grid-to-list td:before { /* Now like a table header */
            position: absolute; /* Top/left values mimic padding */
            top: 6px;
            left: 6px;
            width: 45%;
            padding-right: 10px;
            text-align: left;
            font-weight: bold;
        }

        /* Label the data */
        .grid-to-list td:before {
            content: attr(data-title);
        }
}


/*
[//]: # (Advantage base form styles v1.0)
[//]: # (*******************************)
*/

/*
# Form for 'stack' layout
  This is our default layout, or mobile layout.
```
    <fieldset>
        <legend>Form</legend>
        <div class="form-row">
            <label>Field 1</label>
            <input type="text" />
            <span class="validation">Please enter valid</span>
        </div>

        <div class="form-row">
            <label>Field 1</label>
            <div id="list" class="list-control">
                <input id="rbList11" type="radio" name="list" value="Item 1"><label for="rbList11">Item 1</label>
                <input id="rbList21" type="radio" name="list" value="Item 1"><label for="rbList21">Item 2</label>
            </div>
            <span class="validation">Please select valid</span>
        </div>

        <div class="form-row">
            <label>Field 1</label>
            <select>
				<option value="Please Select">Please Select</option>
			</select>
            <span class="validation">Please select valid</span>
        </div>

        <div class="form-row">
            <label for="chkList">Field 1</label>
            <div id="chkList" class="list-control">
                <input id="chkList_01" type="checkbox" value="0">
                <label for="chkList_01">Item 1</label>
                <input id="chkList_11" type="checkbox" value="1">
                <label for="chkList_11">Item 2</label>
            </div>
            <span class="validation">Rquired field</span>
        </div>

        <div class="form-row">
            <label>Field 1</label>
            <textarea rows="2" cols="20"></textarea>
            <span class="validation">Please select valid</span>
        </div>

        <div class="form-row">			        
            <input type="submit" value="Please Submit" >    
        </div>
    </fieldset>

    <div class="row-fluid">
        <fieldset>
            <legend>Form in Grid Layout</legend>
                
            <div class="form-row span-6">
                <label>Field 1</label>
                <input type="text" />
                <span class="validation">Please enter valid</span>
            </div>
        
            <div class="form-row span-6">
                <label>Field 1</label>
                <div id="listb2" class="list-control">
                    <input id="rbList1b2" type="radio" name="listb" value="Item 1"><label for="rbList1b2">Item 1</label>
                    <input id="rbList2b2" type="radio" name="listb" value="Item 1"><label for="rbList2b2">Item 2</label>
                </div>
                <span class="validation">Please select valid</span>
            </div>
       
            <div class="form-row span-6">
                <label>Field 1</label>
                <select>
				    <option value="Please Select">Please Select</option>
			    </select>
                <span class="validation">Please select valid</span>
            </div>
        
            <div class="form-row span-6">
                <label for="chkList">Field 1</label>
                <div id="chkList2" class="list-control">
                    <input id="chkList_02" type="checkbox" value="0">
                    <label for="chkList_02">Item 1</label>
                    <input id="chkList_12" type="checkbox" value="1">
                    <label for="chkList_12">Item 2</label>
                </div>
                <span class="validation">Rquired field</span>
            </div>
        
            <div class="form-row span-6">
                <label>Field 1</label>
                <textarea rows="2" cols="20"></textarea>
                <span class="validation">Please select valid</span>
            </div>
        
            <div class="form-row span-6">			        
                <input type="submit" value="Please Submit" >    
		    </div>        
        </fieldset>
    </div>

```
*/
fieldset {
    margin: 0 0 .5rem 0;
    padding: 1rem 0 0 0;
    border: none;
    overflow: hidden
}

    fieldset legend {
        display: none;
    }

.form-row {
    margin-bottom: 1.7rem;
    overflow: auto;
    min-height: 56px;
    height: auto;
}

.span-6.col-sm-6.span6.oaa .form-row {
    overflow: visible;
}
    fieldset .row-fluid {
    margin-bottom: 0;
}

.form-row label, .form-row span.validation, .form-row input, .form-row textarea, .form-row keygen, .form-row select, .form-row button {
    font-size: 1.4rem;
}

/*
[//]: # (Default/Common Form Styles)
[//]: # (**************************)
*/

/*
[//]: # (Label)
*/
fieldset .form-row label,
fieldset .form-row .label-area {
    margin: 0 0 .3rem 0;
    display: block;
}


/*
[//]: # (Controls - Input)
*/
.form-row input[type=text], .form-row input[type=password], .form-row select {
    width: 100%;
    height: 3rem;
    padding: 0 0.6rem;
}

.form-row textarea {
    width: 100%;
    height: 4rem;
}





/*
[//]: # (Controls - Options)
*/
.form-row input[type=checkbox], .form-row input[type=radio] {
    float: left;
    margin: 0.3rem 0 0 0;
    height: 2rem;
}

    .form-row input[type=checkbox] + label, .form-row input[type=radio] + label {
        float: left;
        width: 90% !important;
        text-align: left !important;
        margin: .5rem 1rem 0 0.5rem !important;
    }

    .form-row div input[type=checkbox] + label, .form-row input[type=radio] + label {
        width: 5rem !important;
    }

.form-row .list-control { /*display: block;*/
    overflow: auto;
}

.form-row table.list-control {
    height: auto;
}


/*
[//]: # (Controls - Date Picker)
*/
.form-row .RadPicker,
.form-row .RadPicker .RadInput {
    width: 100%;
    font: initial;
}

/*
[//]: # (Button)
*/
.form-row input[type=submit],
.form-row input[type=button] {
    min-height: 1.8rem !important;
    padding: 0 1rem;
    float: none;
}

    .form-row input[type=submit]:hover,
    .form-row input[type=button]:hover {
    }

/*
[//]: # (Validation)
*/
.form-row .validation {
    display: inline-block;
    color: red;
    padding-top: .5rem;
}

/*
[//]: # (Browser stuff)
*/
.form-row input:focus,
.form-row input:focus {
    outline: none;
}

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

.form-row .advantage-formbuilder-submit {
    margin: 0 !important;
}
/*
# Form for 'flow' layout.
  This is an override layout to force elements to stack on desktop.
```
    <fieldset class="flow">
        <legend>Form</legend>
        <div class="form-row">
            <label>Field 1</label>
            <input type="text" />
            <span class="validation">Please enter valid</span>
        </div>

        <div class="form-row">
            <label>Field 1</label>
            <div id="list3" class="list-control">
                <input id="rbList1" type="radio" name="list" value="Item 1"><label for="rbList1">Item 1</label>
                <input id="rbList2" type="radio" name="list" value="Item 1"><label for="rbList2">Item 2</label>
            </div>
            <span class="validation">Please select valid</span>
        </div>

        <div class="form-row">
            <label>Field 1</label>
            <select>
				<option value="Please Select">Please Select</option>
			</select>
            <span class="validation">Please select valid</span>
        </div>

        <div class="form-row">
            <label for="chkList">Field 1</label>
            <div id="chkList3" class="list-control">
                <input id="chkList_03" type="checkbox" value="0">
                <label for="chkList_03">Item 1</label>
                <input id="chkList_13" type="checkbox" value="1">
                <label for="chkList_13">Item 2</label>
            </div>
            <span class="validation">Rquired field</span>
        </div>

        <div class="form-row">
            <label>Field 1</label>
            <textarea rows="2" cols="20"></textarea>
            <span class="validation">Please select valid</span>
        </div>

        <div class="form-row">			        
            <input type="submit" value="Please Submit" >    
		</div>
    </fieldset>

    <div class="row-fluid">
        <fieldset class="flow">
            <legend>Form in Grid Layout</legend>
        
            <div class="form-row span-6">
                <label>Field 1</label>
                <input type="text" />
                <span class="validation">Please enter valid</span>
            </div>
        
            <div class="form-row span-6">
                <label>Field 1</label>
                <div id="listb" class="list-control">
                    <input id="rbList1b" type="radio" name="listb" value="Item 1"><label for="rbList1b">Item 1</label>
                    <input id="rbList2b" type="radio" name="listb" value="Item 1"><label for="rbList2b">Item 2</label>
                </div>
                <span class="validation">Please select valid</span>
            </div>
       
            <div class="form-row span-6">
                <label>Field 1</label>
                <select>
				    <option value="Please Select">Please Select</option>
			    </select>
                <span class="validation">Please select valid</span>
            </div>
  
            <div class="form-row span-6">
                <label for="chkList">Field 1</label>
                <div id="chkList4" class="list-control">
                    <input id="chkList_04" type="checkbox" value="0">
                    <label for="chkList_04">Item 1</label>
                    <input id="chkList_14" type="checkbox" value="1">
                    <label for="chkList_14">Item 2</label>
                </div>
                <span class="validation">Rquired field</span>
            </div>
        
            <div class="form-row span-6">
                <label>Field 1</label>
                <textarea rows="2" cols="20"></textarea>
                <span class="validation">Please select valid</span>
            </div>
        
            <div class="form-row span-6">			        
                <input type="submit" value="Please Submit" >    
		    </div>        
        </fieldset>
    </div>

```
*/
/*
[//]: # (Flow Layout)
*/
@media (min-width:768px) {
    .flow .form-row {
        overflow: auto;
        margin: 0 0 1rem 0;
        padding-bottom: .5rem;
    }

        .flow .form-row label,
        .flow .form-row input,
        .flow .form-row select,
        .flow .form-row textarea,
        .flow .form-row .label-area,
        .flow .form-row .list-control {
            float: left;
        }

        /*
    [//]: # (Label)
    */
        /* span-12 */
        .flow .form-row label,
        .flow .form-row .label-area {
            width: 13%;
            text-align: right;
            margin: .4rem 1rem 0 0;
        }

        .flow .form-row .no-label {
            margin-left: 14%;
        }


    /* span-6 */
    .flow .span-6 label,
    .flow .span-6 .label-area {
        width: 27%;
    }

    .flow .span-6 .no-label {
        margin-left: 29%;
    }

    /*
    [//]: # (Controls)
    */
    /* span-12 */
    .flow .form-row input[type=text],
    .flow .form-row input[type=password],
    .flow .form-row select,
    .flow .form-row .list-control,
    .flow .form-row textarea,
    .flow .form-row .control {
        width: 85%;
    }



    /* span-6 */
    .flow .span-6 input[type=text],
    .flow .span-6 input[type=password],
    .flow .span-6 select,
    .flow .span-6 .list-control,
    .flow .span-6 textarea {
        width: 69%;
    }


    /*
    [//]: # (Controls - Date Picker)
    */

    .flow .form-row .RadPicker {
        float: left;
    }

        .flow .form-row .RadPicker .RadInput,
        .flow .form-row .RadPicker .RadInput input[type=text] {
            width: 100% !important;
            font: initial;
        }

    /* span-12 */
    .flow .form-row .RadPicker {
        width: 85%;
    }

    /* span-6 */
    .flow .span-6 .RadPicker {
        width: 69%;
    }


    /*
    [//]: # (Button)
    */

    .flow .form-row input[type=submit],
    .flow .form-row input[type=button] {
        margin: 0 0 0 14%;
    }

    .flow .form-row.span-6 input[type=submit],
    .flow .form-row.span-6 input[type=button] {
        margin: 0 0 0 28%;
    }

    /*
    [//]: # (Validation)
    */
    .flow .form-row .validation {
        float: left;
        margin-left: 14%;
    }

    .flow .span-6 .validation {
        float: left;
        margin-left: 29%;
    }
}


/*
# jQuery Timepicker  
  You can pair timepicker with datepicker if needed.
  Javascript isnt included in StyleGuide so it won't appear as expected.
```
    <input id="timePicker" type="text" class="time" />

    <script src="/{domain}/js/plugins/jquery.timepicker.min.js"></script>
    <script>
        //$(function () {
        //    $('#timePicker').timepicker();
        //});
    </script>
```
*/
.ui-timepicker-wrapper {
    overflow-y: auto;
    height: 150px;
    width: 100px;
    background: #fff;
    border: 1px solid #ddd;
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    outline: none;
    z-index: 10001;
    margin: 0;
}

    .ui-timepicker-wrapper.ui-timepicker-with-duration {
        width: 13rem;
    }

        .ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-30,
        .ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-60 {
            width: 11rem;
        }

.ui-timepicker-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ui-timepicker-duration {
    margin-left: 5px;
    color: #888;
}

.ui-timepicker-list:hover .ui-timepicker-duration {
    color: #888;
}

.ui-timepicker-list li {
    padding: 3px 0 3px 5px;
    cursor: pointer;
    white-space: nowrap;
    color: #000;
    list-style: none;
    margin: 0;
}

.ui-timepicker-list:hover .ui-timepicker-selected {
    background: #fff;
    color: #000;
}

li.ui-timepicker-selected,
.ui-timepicker-list li:hover,
.ui-timepicker-list .ui-timepicker-selected:hover {
    background: #1980EC;
    color: #fff;
}

    li.ui-timepicker-selected .ui-timepicker-duration,
    .ui-timepicker-list li:hover .ui-timepicker-duration {
        color: #ccc;
    }

.ui-timepicker-list li.ui-timepicker-disabled,
.ui-timepicker-list li.ui-timepicker-disabled:hover,
.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
    color: #888;
    cursor: default;
}

    .ui-timepicker-list li.ui-timepicker-disabled:hover,
    .ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
        background: #f2f2f2;
    }


/*
# jQuery Datepicker  
```
    <input id="datePicker" type="text" class="date" />

    <script src="/{domain}/js/plugins/bootstrap-datepicker.min.js"></script>
    <script>
        $(function () {
            //$('#datePicker').datepicker({
            //    'format': 'yyyy-m-d',
            //    'autoclose': true
            //});
        });
    </script>
```
*/
/*
[//]: # (Datepicker for Bootstrap)
[//]: # (Copyright 2012 Stefan Petre)
[//]: # (Improvements by Andrew Rowls)
[//]: # (Licensed under the Apache License v2.0)
[//]: # (http://www.apache.org/licenses/LICENSE-2.0)
*/
.datepicker {
    padding: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    direction: ltr;
}

.datepicker-inline {
    width: 220px;
}

.datepicker.datepicker-rtl {
    direction: rtl;
}

    .datepicker.datepicker-rtl table tr td span {
        float: right;
    }

.datepicker-dropdown {
    top: 0;
    left: 0;
}

    .datepicker-dropdown:before {
        content: '';
        display: inline-block;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-bottom: 7px solid #ccc;
        border-top: 0;
        border-bottom-color: rgba(0, 0, 0, 0.2);
        position: absolute;
    }

    .datepicker-dropdown:after {
        content: '';
        display: inline-block;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid #ffffff;
        border-top: 0;
        position: absolute;
    }

    .datepicker-dropdown.datepicker-orient-left:before {
        left: 6px;
    }

    .datepicker-dropdown.datepicker-orient-left:after {
        left: 7px;
    }

    .datepicker-dropdown.datepicker-orient-right:before {
        right: 6px;
    }

    .datepicker-dropdown.datepicker-orient-right:after {
        right: 7px;
    }

    .datepicker-dropdown.datepicker-orient-top:before {
        top: -7px;
    }

    .datepicker-dropdown.datepicker-orient-top:after {
        top: -6px;
    }

    .datepicker-dropdown.datepicker-orient-bottom:before {
        bottom: -7px;
        border-bottom: 0;
        border-top: 7px solid #999;
    }

    .datepicker-dropdown.datepicker-orient-bottom:after {
        bottom: -6px;
        border-bottom: 0;
        border-top: 6px solid #ffffff;
    }

.datepicker > div {
    display: none;
}

.datepicker.days div.datepicker-days {
    display: block;
}

.datepicker.months div.datepicker-months {
    display: block;
}

.datepicker.years div.datepicker-years {
    display: block;
}

.datepicker table {
    margin: 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.datepicker td,
.datepicker th {
    text-align: center;
    width: 20px;
    height: 20px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: none;
}

.table-striped .datepicker table tr td,
.table-striped .datepicker table tr th {
    background-color: transparent;
}

.datepicker table tr td.day:hover,
.datepicker table tr td.day.focused {
    background: #eeeeee;
    cursor: pointer;
}

.datepicker table tr td.old,
.datepicker table tr td.new {
    color: #999999;
}

.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
    background: none;
    color: #999999;
    cursor: default;
}

.datepicker table tr td.today,
.datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover {
    background-color: #fde19a;
    background-image: -moz-linear-gradient(top, #fdd49a, #fdf59a);
    background-image: -ms-linear-gradient(top, #fdd49a, #fdf59a);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fdd49a), to(#fdf59a));
    background-image: -webkit-linear-gradient(top, #fdd49a, #fdf59a);
    background-image: -o-linear-gradient(top, #fdd49a, #fdf59a);
    background-image: linear-gradient(top, #fdd49a, #fdf59a);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdd49a', endColorstr='#fdf59a', GradientType=0);
    border-color: #fdf59a #fdf59a #fbed50;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    color: #000;
}

    .datepicker table tr td.today:hover,
    .datepicker table tr td.today:hover:hover,
    .datepicker table tr td.today.disabled:hover,
    .datepicker table tr td.today.disabled:hover:hover,
    .datepicker table tr td.today:active,
    .datepicker table tr td.today:hover:active,
    .datepicker table tr td.today.disabled:active,
    .datepicker table tr td.today.disabled:hover:active,
    .datepicker table tr td.today.active,
    .datepicker table tr td.today:hover.active,
    .datepicker table tr td.today.disabled.active,
    .datepicker table tr td.today.disabled:hover.active,
    .datepicker table tr td.today.disabled,
    .datepicker table tr td.today:hover.disabled,
    .datepicker table tr td.today.disabled.disabled,
    .datepicker table tr td.today.disabled:hover.disabled,
    .datepicker table tr td.today[disabled],
    .datepicker table tr td.today:hover[disabled],
    .datepicker table tr td.today.disabled[disabled],
    .datepicker table tr td.today.disabled:hover[disabled] {
        background-color: #fdf59a;
    }

        .datepicker table tr td.today:active,
        .datepicker table tr td.today:hover:active,
        .datepicker table tr td.today.disabled:active,
        .datepicker table tr td.today.disabled:hover:active,
        .datepicker table tr td.today.active,
        .datepicker table tr td.today:hover.active,
        .datepicker table tr td.today.disabled.active,
        .datepicker table tr td.today.disabled:hover.active {
            background-color: #fbf069 \9;
        }

        .datepicker table tr td.today:hover:hover {
            color: #000;
        }

        .datepicker table tr td.today.active:hover {
            color: #fff;
        }

.datepicker table tr td.range,
.datepicker table tr td.range:hover,
.datepicker table tr td.range.disabled,
.datepicker table tr td.range.disabled:hover {
    background: #eeeeee;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

    .datepicker table tr td.range.today,
    .datepicker table tr td.range.today:hover,
    .datepicker table tr td.range.today.disabled,
    .datepicker table tr td.range.today.disabled:hover {
        background-color: #f3d17a;
        background-image: -moz-linear-gradient(top, #f3c17a, #f3e97a);
        background-image: -ms-linear-gradient(top, #f3c17a, #f3e97a);
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f3c17a), to(#f3e97a));
        background-image: -webkit-linear-gradient(top, #f3c17a, #f3e97a);
        background-image: -o-linear-gradient(top, #f3c17a, #f3e97a);
        background-image: linear-gradient(top, #f3c17a, #f3e97a);
        background-repeat: repeat-x;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3c17a', endColorstr='#f3e97a', GradientType=0);
        border-color: #f3e97a #f3e97a #edde34;
        border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
        filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
    }

        .datepicker table tr td.range.today:hover,
        .datepicker table tr td.range.today:hover:hover,
        .datepicker table tr td.range.today.disabled:hover,
        .datepicker table tr td.range.today.disabled:hover:hover,
        .datepicker table tr td.range.today:active,
        .datepicker table tr td.range.today:hover:active,
        .datepicker table tr td.range.today.disabled:active,
        .datepicker table tr td.range.today.disabled:hover:active,
        .datepicker table tr td.range.today.active,
        .datepicker table tr td.range.today:hover.active,
        .datepicker table tr td.range.today.disabled.active,
        .datepicker table tr td.range.today.disabled:hover.active,
        .datepicker table tr td.range.today.disabled,
        .datepicker table tr td.range.today:hover.disabled,
        .datepicker table tr td.range.today.disabled.disabled,
        .datepicker table tr td.range.today.disabled:hover.disabled,
        .datepicker table tr td.range.today[disabled],
        .datepicker table tr td.range.today:hover[disabled],
        .datepicker table tr td.range.today.disabled[disabled],
        .datepicker table tr td.range.today.disabled:hover[disabled] {
            background-color: #f3e97a;
        }

            .datepicker table tr td.range.today:active,
            .datepicker table tr td.range.today:hover:active,
            .datepicker table tr td.range.today.disabled:active,
            .datepicker table tr td.range.today.disabled:hover:active,
            .datepicker table tr td.range.today.active,
            .datepicker table tr td.range.today:hover.active,
            .datepicker table tr td.range.today.disabled.active,
            .datepicker table tr td.range.today.disabled:hover.active {
                background-color: #efe24b \9;
            }

.datepicker table tr td.selected,
.datepicker table tr td.selected:hover,
.datepicker table tr td.selected.disabled,
.datepicker table tr td.selected.disabled:hover {
    background-color: #9e9e9e;
    background-image: -moz-linear-gradient(top, #b3b3b3, #808080);
    background-image: -ms-linear-gradient(top, #b3b3b3, #808080);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b3b3b3), to(#808080));
    background-image: -webkit-linear-gradient(top, #b3b3b3, #808080);
    background-image: -o-linear-gradient(top, #b3b3b3, #808080);
    background-image: linear-gradient(top, #b3b3b3, #808080);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3b3b3', endColorstr='#808080', GradientType=0);
    border-color: #808080 #808080 #595959;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

    .datepicker table tr td.selected:hover,
    .datepicker table tr td.selected:hover:hover,
    .datepicker table tr td.selected.disabled:hover,
    .datepicker table tr td.selected.disabled:hover:hover,
    .datepicker table tr td.selected:active,
    .datepicker table tr td.selected:hover:active,
    .datepicker table tr td.selected.disabled:active,
    .datepicker table tr td.selected.disabled:hover:active,
    .datepicker table tr td.selected.active,
    .datepicker table tr td.selected:hover.active,
    .datepicker table tr td.selected.disabled.active,
    .datepicker table tr td.selected.disabled:hover.active,
    .datepicker table tr td.selected.disabled,
    .datepicker table tr td.selected:hover.disabled,
    .datepicker table tr td.selected.disabled.disabled,
    .datepicker table tr td.selected.disabled:hover.disabled,
    .datepicker table tr td.selected[disabled],
    .datepicker table tr td.selected:hover[disabled],
    .datepicker table tr td.selected.disabled[disabled],
    .datepicker table tr td.selected.disabled:hover[disabled] {
        background-color: #808080;
    }

        .datepicker table tr td.selected:active,
        .datepicker table tr td.selected:hover:active,
        .datepicker table tr td.selected.disabled:active,
        .datepicker table tr td.selected.disabled:hover:active,
        .datepicker table tr td.selected.active,
        .datepicker table tr td.selected:hover.active,
        .datepicker table tr td.selected.disabled.active,
        .datepicker table tr td.selected.disabled:hover.active {
            background-color: #666666 \9;
        }

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover {
    background-color: #006dcc;
    background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
    background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
    background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
    background-image: -o-linear-gradient(top, #0088cc, #0044cc);
    background-image: linear-gradient(top, #0088cc, #0044cc);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
    border-color: #0044cc #0044cc #002a80;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

    .datepicker table tr td.active:hover,
    .datepicker table tr td.active:hover:hover,
    .datepicker table tr td.active.disabled:hover,
    .datepicker table tr td.active.disabled:hover:hover,
    .datepicker table tr td.active:active,
    .datepicker table tr td.active:hover:active,
    .datepicker table tr td.active.disabled:active,
    .datepicker table tr td.active.disabled:hover:active,
    .datepicker table tr td.active.active,
    .datepicker table tr td.active:hover.active,
    .datepicker table tr td.active.disabled.active,
    .datepicker table tr td.active.disabled:hover.active,
    .datepicker table tr td.active.disabled,
    .datepicker table tr td.active:hover.disabled,
    .datepicker table tr td.active.disabled.disabled,
    .datepicker table tr td.active.disabled:hover.disabled,
    .datepicker table tr td.active[disabled],
    .datepicker table tr td.active:hover[disabled],
    .datepicker table tr td.active.disabled[disabled],
    .datepicker table tr td.active.disabled:hover[disabled] {
        background-color: #0044cc;
    }

        .datepicker table tr td.active:active,
        .datepicker table tr td.active:hover:active,
        .datepicker table tr td.active.disabled:active,
        .datepicker table tr td.active.disabled:hover:active,
        .datepicker table tr td.active.active,
        .datepicker table tr td.active:hover.active,
        .datepicker table tr td.active.disabled.active,
        .datepicker table tr td.active.disabled:hover.active {
            background-color: #003399 \9;
        }

.datepicker table tr td span {
    display: block;
    width: 23%;
    height: 54px;
    line-height: 54px;
    float: left;
    margin: 1%;
    cursor: pointer;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

    .datepicker table tr td span:hover {
        background: #eeeeee;
    }

    .datepicker table tr td span.disabled,
    .datepicker table tr td span.disabled:hover {
        background: none;
        color: #999999;
        cursor: default;
    }

    .datepicker table tr td span.active,
    .datepicker table tr td span.active:hover,
    .datepicker table tr td span.active.disabled,
    .datepicker table tr td span.active.disabled:hover {
        background-color: #006dcc;
        background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
        background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
        background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
        background-image: -o-linear-gradient(top, #0088cc, #0044cc);
        background-image: linear-gradient(top, #0088cc, #0044cc);
        background-repeat: repeat-x;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
        border-color: #0044cc #0044cc #002a80;
        border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
        filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
        color: #fff;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    }

        .datepicker table tr td span.active:hover,
        .datepicker table tr td span.active:hover:hover,
        .datepicker table tr td span.active.disabled:hover,
        .datepicker table tr td span.active.disabled:hover:hover,
        .datepicker table tr td span.active:active,
        .datepicker table tr td span.active:hover:active,
        .datepicker table tr td span.active.disabled:active,
        .datepicker table tr td span.active.disabled:hover:active,
        .datepicker table tr td span.active.active,
        .datepicker table tr td span.active:hover.active,
        .datepicker table tr td span.active.disabled.active,
        .datepicker table tr td span.active.disabled:hover.active,
        .datepicker table tr td span.active.disabled,
        .datepicker table tr td span.active:hover.disabled,
        .datepicker table tr td span.active.disabled.disabled,
        .datepicker table tr td span.active.disabled:hover.disabled,
        .datepicker table tr td span.active[disabled],
        .datepicker table tr td span.active:hover[disabled],
        .datepicker table tr td span.active.disabled[disabled],
        .datepicker table tr td span.active.disabled:hover[disabled] {
            background-color: #0044cc;
        }

            .datepicker table tr td span.active:active,
            .datepicker table tr td span.active:hover:active,
            .datepicker table tr td span.active.disabled:active,
            .datepicker table tr td span.active.disabled:hover:active,
            .datepicker table tr td span.active.active,
            .datepicker table tr td span.active:hover.active,
            .datepicker table tr td span.active.disabled.active,
            .datepicker table tr td span.active.disabled:hover.active {
                background-color: #003399 \9;
            }

    .datepicker table tr td span.old,
    .datepicker table tr td span.new {
        color: #999999;
    }

.datepicker th.datepicker-switch {
    width: 145px;
}

.datepicker thead tr:first-child th,
.datepicker tfoot tr th {
    cursor: pointer;
}

    .datepicker thead tr:first-child th:hover,
    .datepicker tfoot tr th:hover {
        background: #eeeeee;
    }

.datepicker .cw {
    font-size: 10px;
    width: 12px;
    padding: 0 2px 0 5px;
    vertical-align: middle;
}

.datepicker thead tr:first-child th.cw {
    cursor: default;
    background-color: transparent;
}

.input-append.date .add-on i,
.input-prepend.date .add-on i {
    cursor: pointer;
    width: 16px;
    height: 16px;
}

.input-daterange input {
    text-align: center;
}

    .input-daterange input:first-child {
        -webkit-border-radius: 3px 0 0 3px;
        -moz-border-radius: 3px 0 0 3px;
        border-radius: 3px 0 0 3px;
    }

    .input-daterange input:last-child {
        -webkit-border-radius: 0 3px 3px 0;
        -moz-border-radius: 0 3px 3px 0;
        border-radius: 0 3px 3px 0;
    }

.input-daterange .add-on {
    display: inline-block;
    width: auto;
    min-width: 16px;
    height: 20px;
    padding: 4px 5px;
    font-weight: normal;
    line-height: 20px;
    text-align: center;
    text-shadow: 0 1px 0 #ffffff;
    vertical-align: middle;
    background-color: #eeeeee;
    border: 1px solid #ccc;
    margin-left: -5px;
    margin-right: -5px;
}

.datepicker.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    float: left;
    display: none;
    min-width: 160px;
    list-style: none;
    background-color: #ffffff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    *border-right-width: 2px;
    *border-bottom-width: 2px;
    color: #333333;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 20px;
}

    .datepicker.dropdown-menu th,
    .datepicker.dropdown-menu td {
        padding: 4px 5px;
    }


/*
[//]: # (Advantage base blog styles v1.0)
[//]: # (*******************************)
*/

.blog {
    width: 100%;
}

    .blog article {
        margin-bottom: 15px;
    }

    .blog main,
    .blog section,
    .blog footer {
        padding: 1.5rem;
        overflow: hidden;
        margin-top: 0;
    }


    .blog article time {
        display: block;
        margin-bottom: 1rem;
    }

    .blog article .category {
        margin-bottom: 1rem;
    }


    .blog article .tags {
        margin-bottom: .5rem;
    }

        .blog article .tags ul {
            margin-bottom: 0;
        }

            .blog article .tags ul li {
                list-style: none;
                display: inline-block;
                margin-right: 1rem;
            }

    .blog article footer ul.controls,
    .blog article footer .meta {
        margin-bottom: 1rem;
    }

        .blog article footer ul.controls li {
            list-style: none;
            float: left;
            margin: 0 1rem 0 0;
        }

@media (min-width:768px) {
    .blog article footer ul.controls {
        overflow: hidden;
        float: right;
    }

        .blog article footer ul.controls li {
            margin: 0 0 0 1rem;
        }

    .blog article footer .meta {
        float: left;
    }
}

/*
[//]: # (pagination)
[//]: # (**********)
*/
.pagination {
    clear: both;
}

    .pagination li {
        display: inline;
    }

        .pagination li a:hover {
            font-weight: bold;
        }

.current {
    font-weight: bold;
    text-decoration: underline;
}

/*
[//]: # (categories & archives)
[//]: # (*********************)
*/

.categories ul li,
.archives ul li {
    list-style: none;
}

    .archives ul li ul {
        margin-left: 10px;
    }

/*
# Blog 'listing' view
  This view will show articles in a listing style
 ```
    <div class="blog listing">   
        <article>
            <img src="/Assets/Blog/tumblr_lxcug9mj6L1qewrwz.jpg" alt="">
            <section class="main">
                <h2>This is a test post</h2>
                <time>Posted on: 14 April 2016</time>
                <div class="category">
                    <a href="/?cat=Platypus-Facts">Platypus Facts</a>
                </div>
                <p class="fixie"></p>
            </section>
            <section class="tags">
                <ul>
                    <li><a href="/?tag=test+one">#test one</a></li>
                    <li><a href="/?tag=platypus">#platypus</a></li>
                </ul>
            </section>
            <footer>
                <div class="meta" style="display:none;">12 comments</div>
                <ul class="controls">
                    <li>
                        <a title="This is a test post" href="/Blog/test-post">Read More</a>
                    </li>
                </ul>
            </footer>
        </article>
    </div>
```
*/
@media (min-width:768px) {
    .blog.listing picture { /*width:38%;*/
        float: left;
    }
}

/*
# Blog 'tile' view
  This view will show articles in a tile style. You don't have to add in the span-x, unless you want a different size to the default output, which is 31%.

```
    <div class="blog tile">
        <div class="row-fluid">
            <article class="span-5">
                <img src="/Assets/Blog/tumblr_lxcug9mj6L1qewrwz.jpg" alt="">
                <section class="main">
                    <h2>This is a test post</h2>
                    <time>Posted on: 14 April 2016</time>
                    <div class="category">
                        <a href="/?cat=Platypus-Facts">Platypus Facts</a>
                    </div>
                    <p class="fixie"></p>
                </section>
                <section class="tags">
                    <ul>
                        <li><a href="/?tag=test+one">#test one</a></li>
                        <li><a href="/?tag=platypus">#platypus</a></li>
                    </ul>
                </section>
                <footer>
                    <div class="meta" style="display:none;">12 comments</div>
                    <ul class="controls">
                        <li>
                            <a title="This is a test post" href="/Blog/test-post">Read More</a>
                        </li>
                    </ul>
                </footer>
            </article>
        </div>
    </div>    
    
```
*/
@media (min-width:768px) {
    .blog.tile article {
        position: relative;
        float: left;
        padding-bottom: 5rem;
    }

        .blog.tile article.detail {
            margin-right: 0;
        }

        .blog.tile article.span-4, .row-fluid.row.span-4.pull-left {
            width: 32%;
            margin-right: 2%;
            margin-top: 25px;
        }

            .blog.tile article.span-4:nth-child(3n+3), div .row-fluid.row.span-4:nth-child(3n+3).pull-left {
                margin-right: 0;
            }

        /* assume 3 across if no span set */
        .blog.tile article:not([class*=span-]) {
            width: 31%;
            margin-right: 2%;
        }

    .blog.tile footer {
        position: absolute;
        bottom: 0;
    }

        .blog.tile footer .controls,
        .blog.tile footer .meta {
            float: none;
        }

            .blog.tile footer .controls li {
                margin-left: 0;
                margin-right: 1rem;
            }
}

/*
# Blog 'image-tile' view
  This view will show articles in an image tile style.
 ```
    <div class="blog image-tile">
        <article class="span-5">
            <img src="/Assets/Blog/tumblr_lxcug9mj6L1qewrwz.jpg" alt="">
            <section class="main">
                <h2>This is a test post</h2>
                <time>Posted on: 14 April 2016</time>
                <div class="category">
                    <a href="/?cat=Platypus-Facts">Platypus Facts</a>
                </div>
                <p class="fixie"></p>
            </section>
            <section class="tags">
                <ul>
                    <li><a href="/?tag=test+one">#test one</a></li>
                    <li><a href="/?tag=platypus">#platypus</a></li>
                </ul>
            </section>
            <footer>
                <div class="meta" style="display:none;">12 comments</div>
                <ul class="controls">
                    <li>
                        <a title="This is a test post" href="/Blog/test-post">Read More</a>
                    </li>
                </ul>
            </footer>
        </article>
    </div>
```
*/
.blog.image-tile time,
.blog.image-tile p,
.blog.image-tile .tags,
.blog.image-tile footer {
    display: none;
}

.blog.image-tile article {
    position: relative;
}

    .blog.image-tile article main {
        position: absolute;
        top: 1rem;
    }

        .blog.image-tile article main,
        .blog.image-tile article main .category a {
            color: #fff;
        }


/*
[//]: # (Work in Progress : Temporary share styles)
[//]: # (@Craig pls complete;)
*/
.socialmedia div {
    background-repeat: no-repeat;
}

.addthis_toolbox a {
    float: left;
}

    .addthis_toolbox a div {
        padding-left: 20px;
        height: 20px;
    }

.topShare {
    display: none;
}

/*
[//]: # (Work in Progress : Temporary comment styles)
[//]: # (@Craig pls complete;)
*/
.comment-list {
    margin: 0;
    clear: left;
}

    .comment-list li {
        list-style: none;
        padding: 5px 0;
        clear: both;
        background: #e9e9e9;
    }

.comment-content {
    width: 100%;
    display: block;
}

    .comment-content.comment-deleted {
        color: #a0a0a0;
    }

.comment-reply {
    clear: both;
    float: left;
    display: block;
    padding-top: 5px;
    cursor: pointer;
}

.comment-delete {
    clear: both;
    float: left;
    display: block;
    padding-top: 5px;
    cursor: pointer;
}

.comment-list .comment-list {
    padding-left: 15px;
}

.comment-footer {
    display: inline;
    width: 100%;
    background: #e9e9e9;
    clear: both;
    float: left
}

    .comment-footer li {
        display: inline;
    }



/*
[//]: # (Transition)
[//]: # (**********)
*/
.transition {
    transition: all 1s ease 0s;
}


/*
[//]: # (nav main menu hover fancy link effect)
[//]: # (**********)
*/
@media (min-width: 993px) {

    /* Effect 1: Underline Use: <nav class="fancy-link-underline"> */
    nav.fancy-link-underline ul li a {
        position: relative
    }

        nav.fancy-link-underline ul li a:before {
            transition: all .5s;
        }

        nav.fancy-link-underline ul li a:after {
            position: absolute;
            transition: all .5s;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            width: 0%;
            content: '.';
            color: transparent;
            background: #818181;
            height: 2px;
        }

        nav.fancy-link-underline ul li.active a:after,
        nav.fancy-link-underline ul li a:hover:after {
            width: 100%;
        }


    /* Effect 2: Brackets Use: <nav class="fancy-link-brackets"> */
    nav.fancy-link-brackets ul li a::before,
    nav.fancy-link-brackets ul li a::after {
        display: inline-block;
        opacity: 0;
        -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
        -moz-transition: -moz-transform 0.3s, opacity 0.2s;
        transition: transform 0.3s, opacity 0.2s;
    }

    nav.fancy-link-brackets ul li a::before {
        margin-right: 10px;
        content: '[';
        -webkit-transform: translateX(20px);
        -moz-transform: translateX(20px);
        transform: translateX(20px);
    }

    nav.fancy-link-brackets ul li a::after {
        margin-left: 10px;
        content: ']';
        -webkit-transform: translateX(-20px);
        -moz-transform: translateX(-20px);
        transform: translateX(-20px);
    }

    nav.fancy-link-brackets ul li a:hover::before,
    nav.fancy-link-brackets ul li a:hover::after,
    nav.fancy-link-brackets ul li a:focus::before,
    nav.fancy-link-brackets ul li a:focus::after {
        opacity: 1;
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        transform: translateX(0px);
    }

    /* Effect 3: bottom line slides/fades Use: <nav class="fancy-link-bottom-line-slides"> */
    nav.fancy-link-bottom-line-slides ul li {
        padding: 8px 0;
    }

        nav.fancy-link-bottom-line-slides ul li a {
            padding: 8px 0;
            position: relative;
        }

            nav.fancy-link-bottom-line-slides ul li a::after {
                position: absolute;
                top: 100%;
                left: 0;
                width: 100%;
                height: 4px;
                background: rgba(0,0,0,0.1);
                content: '';
                opacity: 0;
                -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
                -moz-transition: opacity 0.3s, -moz-transform 0.3s;
                transition: opacity 0.3s, transform 0.3s;
                -webkit-transform: translateY(10px);
                -moz-transform: translateY(10px);
                transform: translateY(10px);
            }

            nav.fancy-link-bottom-line-slides ul li a:hover::after,
            nav.fancy-link-bottom-line-slides ul li a:focus::after {
                opacity: 1;
                -webkit-transform: translateY(0px);
                -moz-transform: translateY(0px);
                transform: translateY(0px);
            }

    /* Effect 4: bottom border enlarge Use: <nav class="fancy-link-bottom-border-enlarge"> */
    nav.fancy-link-bottom-border-enlarge ul li a {
        padding: 0 0 10px;
        position: relative;
    }

        nav.fancy-link-bottom-border-enlarge ul li a::after {
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            height: 1px;
            background: #ccc;
            content: '';
            opacity: 0;
            -webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s;
            -moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s;
            transition: height 0.3s, opacity 0.3s, transform 0.3s;
            -webkit-transform: translateY(-10px);
            -moz-transform: translateY(-10px);
            transform: translateY(-10px);
        }

        nav.fancy-link-bottom-border-enlarge ul li a:hover::after,
        nav.fancy-link-bottom-border-enlarge ul li a:focus::after {
            height: 3px;
            opacity: 1;
            -webkit-transform: translateY(0px);
            -moz-transform: translateY(0px);
            transform: translateY(0px);
        }


    /* Effect 5: second border slides up Use: <nav class="fancy-link-border-slides-up">  */
    nav.fancy-link-border-slides-up ul li a {
        padding: 12px 10px 10px !important;
        color: #566473;
        text-shadow: none;
        font-weight: 700;
        position: relative;
    }

        nav.fancy-link-border-slides-up ul li a::before,
        nav.fancy-link-border-slides-up ul li a::after {
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            height: 3px;
            background: #566473;
            content: '';
            -webkit-transition: -webkit-transform 0.3s;
            -moz-transition: -moz-transform 0.3s;
            transition: transform 0.3s;
            -webkit-transform: scale(0.85);
            -moz-transform: scale(0.85);
            transform: scale(0.85);
        }

        nav.fancy-link-border-slides-up ul li a::after {
            opacity: 0;
            -webkit-transition: top 0.3s, opacity 0.3s, -webkit-transform 0.3s;
            -moz-transition: top 0.3s, opacity 0.3s, -moz-transform 0.3s;
            transition: top 0.3s, opacity 0.3s, transform 0.3s;
        }

        nav.fancy-link-border-slides-up ul li a:hover::before,
        nav.fancy-link-border-slides-up ul li a:hover::after,
        nav.fancy-link-border-slides-up ul li a:focus::before,
        nav.fancy-link-border-slides-up ul li a:focus::after {
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            transform: scale(1);
        }

        nav.fancy-link-border-slides-up ul li a:hover::after,
        nav.fancy-link-border-slides-up ul li a:focus::after {
            top: 0%;
            opacity: 1;
        }

    /* Effect 6: three circles Use: <nav class="fancy-link-three-circles"> */
    nav.fancy-link-three-circles ul li {
        padding-bottom: 14px
    }

        nav.fancy-link-three-circles ul li a {
            -webkit-transition: color 0.3s;
            -moz-transition: color 0.3s;
            transition: color 0.3s;
            position: relative;
        }

            nav.fancy-link-three-circles ul li a::before {
                position: absolute;
                top: 100%;
                left: 50%;
                color: transparent;
                content: '•';
                text-shadow: 0 0 transparent;
                font-size: 1.2em;
                -webkit-transition: text-shadow 0.3s, color 0.3s;
                -moz-transition: text-shadow 0.3s, color 0.3s;
                transition: text-shadow 0.3s, color 0.3s;
                -webkit-transform: translateX(-50%);
                -moz-transform: translateX(-50%);
                transform: translateX(-50%);
                pointer-events: none;
            }

            nav.fancy-link-three-circles ul li a:hover::before,
            nav.fancy-link-three-circles ul li a:focus::before {
                color: #ba7700;
                text-shadow: 10px 0 #ba7700, -10px 0 #ba7700;
            }

            nav.fancy-link-three-circles ul li a:hover,
            nav.fancy-link-three-circles ul li a:focus {
                color: #ba7700;
            }

    /* Effect 7: borders slight translate Use: <nav class="fancy-link-borders-translate"> */
    nav.fancy-link-borders-translate ul li a {
        position: relative;
        padding: 10px;
        font-weight: 700;
        text-shadow: none;
        -webkit-transition: color 0.3s;
        -moz-transition: color 0.3s;
        transition: color 0.3s;
    }

        nav.fancy-link-borders-translate ul li a::before,
        nav.fancy-link-borders-translate ul li a::after {
            position: absolute;
            left: 0;
            width: 100%;
            height: 2px;
            background: #999;
            content: '';
            opacity: 0;
            -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
            -moz-transition: opacity 0.3s, -moz-transform 0.3s;
            transition: opacity 0.3s, transform 0.3s;
            -webkit-transform: translateY(-10px);
            -moz-transform: translateY(-10px);
            transform: translateY(-10px);
        }

        nav.fancy-link-borders-translate ul li a::before {
            top: 0;
            -webkit-transform: translateY(-10px);
            -moz-transform: translateY(-10px);
            transform: translateY(-10px);
        }

        nav.fancy-link-borders-translate ul li a::after {
            bottom: 0;
            -webkit-transform: translateY(10px);
            -moz-transform: translateY(10px);
            transform: translateY(10px);
        }

        nav.fancy-link-borders-translate ul li a:hover,
        nav.fancy-link-borders-translate ul li a:focus {
            color: #999;
        }

            nav.fancy-link-borders-translate ul li a:hover::before,
            nav.fancy-link-borders-translate ul li a:focus::before,
            nav.fancy-link-borders-translate ul li a:hover::after,
            nav.fancy-link-borders-translate ul li a:focus::after {
                opacity: 1;
                -webkit-transform: translateY(0px);
                -moz-transform: translateY(0px);
                transform: translateY(0px);
            }
}


/* simple fancy link for anchors */
a.fancy-link {
    position: relative;
}

    a.fancy-link:before {
        transition: all .5s;
    }

    a.fancy-link:after {
        position: absolute;
        transition: all .5s;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 0%;
        content: '.';
        color: transparent;
        background: #818181;
        height: 2px;
    }

    a.fancy-link.active:after,
    a.fancy-link:hover:after {
        width: 100%;
    }


/*
[//]: # (fade-in animation : AnimateSelect choice in Dialog)
[//]: # (**************************************************)
    Use: <div class="span-3 span-6-sm col-sm-3 col-xs-3 animate fade-in">
    This works with js funciton from advantage-base.js check_if_in_view() please see for more details.
*/
.fade-in,
.fade-in.in-view {
    animation: fadein 2s;
    -moz-animation: fadein 2s;
    -webkit-animation: fadein 2s;
    -o-animation: fadein 2s;
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-moz-keyframes fadein { /* Firefox */
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-o-keyframes fadein { /* Opera */
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.animate {
    opacity: 0
}

    .animate.in-view {
        opacity: 1
    }


    /*
[//]: # (Bounce in animation : AnimateSelect choice in Dialog)  
[//]: # (*************)
     Use: <div class="span-3 span-6-sm col-sm-3 col-xs-3 animate bounce-in">)
    This works with js funciton from advantage-base.js check_if_in_view() please ssee for more details.
*/
    .animate.bounce-in.in-view {
        -webkit-animation: bounceIn 1s;
        -moz-animation: bounceIn 1s;
        animation: bounceIn 1s;
    }

@-webkit-keyframes bounceIn {
    0%,100%,20%,40%,60%,80% {
        -webkit-animation-timing-function: cubic-bezier(0.215,.61,.355,1);
        animation-timing-function: cubic-bezier(0.215,.61,.355,1);
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3,.3,.3);
        transform: scale3d(.3,.3,.3);
    }

    20% {
        -webkit-transform: scale3d(1.1,1.1,1.1);
        transform: scale3d(1.1,1.1,1.1);
    }

    40% {
        -webkit-transform: scale3d(.9,.9,.9);
        transform: scale3d(.9,.9,.9);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03,1.03,1.03);
        transform: scale3d(1.03,1.03,1.03);
    }

    80% {
        -webkit-transform: scale3d(.97,.97,.97);
        transform: scale3d(.97,.97,.97);
    }

    100% {
        opacity: 1;
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1);
    }
}

@-moz-keyframes bounceIn {
    0%,100%,20%,40%,60%,80% {
        -webkit-animation-timing-function: cubic-bezier(0.215,.61,.355,1);
        animation-timing-function: cubic-bezier(0.215,.61,.355,1);
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3,.3,.3);
        transform: scale3d(.3,.3,.3);
    }

    20% {
        -webkit-transform: scale3d(1.1,1.1,1.1);
        transform: scale3d(1.1,1.1,1.1);
    }

    40% {
        -webkit-transform: scale3d(.9,.9,.9);
        transform: scale3d(.9,.9,.9);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03,1.03,1.03);
        transform: scale3d(1.03,1.03,1.03);
    }

    80% {
        -webkit-transform: scale3d(.97,.97,.97);
        transform: scale3d(.97,.97,.97);
    }

    100% {
        opacity: 1;
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1);
    }
}

@keyframes bounceIn {
    0%,100%,20%,40%,60%,80% {
        -webkit-animation-timing-function: cubic-bezier(0.215,.61,.355,1);
        animation-timing-function: cubic-bezier(0.215,.61,.355,1);
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3,.3,.3);
        transform: scale3d(.3,.3,.3);
    }

    20% {
        -webkit-transform: scale3d(1.1,1.1,1.1);
        transform: scale3d(1.1,1.1,1.1);
    }

    40% {
        -webkit-transform: scale3d(.9,.9,.9);
        transform: scale3d(.9,.9,.9);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03,1.03,1.03);
        transform: scale3d(1.03,1.03,1.03);
    }

    80% {
        -webkit-transform: scale3d(.97,.97,.97);
        transform: scale3d(.97,.97,.97);
    }

    100% {
        opacity: 1;
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1);
    }
}


.animate.zoomIn.in-view {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}
/*
[//]: # (Zoom in animation : AnimateSelect choice in Dialog)  
[//]: # (*************)
     Use: div class="span-3 span-6-sm col-sm-3 col-xs-3 animate zoomIn">
    This works with js funciton from advantage-base.js check_if_in_view() please ssee for more details.
*/
@-webkit-keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3,.3,.3);
        transform: scale3d(.3,.3,.3);
    }

    50% {
        opacity: 1;
    }
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3,.3,.3);
        transform: scale3d(.3,.3,.3);
    }

    50% {
        opacity: 1;
    }
}



/*
[//]: # (Bouce up and down animation : AnimateSelect choice in Dialog)  
[//]: # (*************)
     up animation Use: <div class="span-3 span-6-sm col-sm-3 col-xs-3 animate bounce-up">
    Down animation Use: <div class="span-3 span-6-sm col-sm-3 col-xs-3 animate bounce-down">
    This works with js funciton from advantage-base.js check_if_in_view() please ssee for more details.
*/

.animate.bounce-up {
    -moz-transition: all 500ms ease-out;
    -webkit-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    transition: all 500ms ease-out;
    -moz-transform: translate3d(0px, 100px, 0px);
    -webkit-transform: translate3d(0px, 100px, 0px);
    -o-transform: translate(0px, 100px);
    -ms-transform: translate(0px, 100px);
    transform: translate3d(0px, 100, 0px);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}

    .animate.bounce-up.in-view {
        -moz-transform: translate3d(0px, 0px, 0px);
        -webkit-transform: translate3d(0px, 0px, 0px);
        -o-transform: translate(0px, 0px);
        -ms-transform: translate(0px, 0px);
        transform: translate3d(0px, 0px, 0px);
    }

.animate.bounce-down {
    -moz-transition: all 500ms ease-out;
    -webkit-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    transition: all 500ms ease-out;
    -moz-transform: translate3d(0px, -100px, 0px);
    -webkit-transform: translate3d(0px, -100px, 0px);
    -o-transform: translate(0px, -100px);
    -ms-transform: translate(0px, -100px);
    transform: translate3d(0px, -100, 0px);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}

    .animate.bounce-down.in-view {
        -moz-transform: translate3d(0px, 0px, 0px);
        -webkit-transform: translate3d(0px, 0px, 0px);
        -o-transform: translate(0px, 0px);
        -ms-transform: translate(0px, 0px);
        transform: translate3d(0px, 0px, 0px);
    }

/*
[//]: # (Transition delay)
[//]: # (*****************)
       
*/
.bounce-down:nth-child(1), .bounce-up:nth-child(1), .bounce-down[data-delay="1"], .bounce-up[data-delay="1"] {
    -webkit-transition-delay: .15s !important;
    transition-delay: .15s !important;
}

.bounce-down:nth-child(2), .bounce-up:nth-child(2), .bounce-down[data-delay="2"], .bounce-up[data-delay="2"] {
    -webkit-transition-delay: .3s !important;
    transition-delay: .3s !important;
}

.bounce-down:nth-child(3), .bounce-up:nth-child(3), .bounce-down[data-delay="3"], .bounce-up[data-delay="3"] {
    -webkit-transition-delay: .45s !important;
    transition-delay: .45s !important;
}

.bounce-down:nth-child(4), .bounce-up:nth-child(4), .bounce-down[data-delay="4"], .bounce-up[data-delay="4"] {
    -webkit-transition-delay: .6s !important;
    transition-delay: .6s !important;
}

.bounce-down:nth-child(5), .bounce-up:nth-child(5), .bounce-down[data-delay="5"], .bounce-up[data-delay="5"] {
    -webkit-transition-delay: .75s !important;
    transition-delay: .75s !important;
}

.bounce-down:nth-child(6), .bounce-up:nth-child(6), .bounce-down[data-delay="6"], .bounce-up[data-delay="6"] {
    -webkit-transition-delay: .9s !important;
    transition-delay: .9s !important;
}

.bounce-down:nth-child(7), .bounce-up:nth-child(7), .bounce-down[data-delay="7"], .bounce-up[data-delay="7"] {
    -webkit-transition-delay: 1.05s !important;
    transition-delay: 1.05s !important;
}

.bounce-down:nth-child(8), .bounce-up:nth-child(8), .bounce-down[data-delay="8"], .bounce-up[data-delay="8"] {
    -webkit-transition-delay: 1.2s !important;
    transition-delay: 1.2s !important;
}

.bounce-down:nth-child(9), .bounce-up:nth-child(9), .bounce-down[data-delay="9"], .bounce-up[data-delay="9"] {
    -webkit-transition-delay: 1.35s !important;
    transition-delay: 1.35s !important;
}

.bounce-down:nth-child(10), .bounce-up:nth-child(10), .bounce-down[data-delay="10"], .bounce-up[data-delay="10"] {
    -webkit-transition-delay: 1.5s !important;
    transition-delay: 1.5s !important;
}

.bounce-down:nth-child(11), .bounce-up:nth-child(11), .bounce-down[data-delay="11"], .bounce-up[data-delay="11"] {
    -webkit-transition-delay: 1.65s !important;
    transition-delay: 1.65s !important;
}

.bounce-down:nth-child(12), .bounce-up:nth-child(12), .bounce-down[data-delay="12"], .bounce-up[data-delay="12"] {
    -webkit-transition-delay: 1.8s !important;
    transition-delay: 1.8s !important;
}


/*
[//]: # (Slider-x Use: please see flyoutNavigation.ascx)
    LAWRY DOCUMENT
*/
.slider-x {
    transform: translateX(100vw);
    -webkit-transform: translateX(100vw);
}

.slide-in-x {
    animation: slide-in 0.5s forwards;
    -webkit-animation: slide-in 0.5s forwards;
}

.slide-out-x {
    animation: slide-out 0.5s forwards;
    -webkit-animation: slide-out 0.5s forwards;
}

@keyframes slide-in {
    100% {
        transform: translateX(0%);
    }
}

@-webkit-keyframes slide-in {
    100% {
        -webkit-transform: translateX(0%);
    }
}

@keyframes slide-out {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(100vw);
    }
}

@-webkit-keyframes slide-out {
    0% {
        -webkit-transform: translateX(0%);
    }

    100% {
        -webkit-transform: translateX(100vw);
    }
}



/*custom */

.row-fluid.row.breadcrumb {
    margin-left: 10px
}



.NewsContainer {
    padding: 0 20px
}

.postGrid {
    margin-bottom: 70px
}

.postDate h1 {
    color: #999
}

.postDate h1, .postTitle h2 {
    margin-bottom: 10px
}

.postCategory { /*margin-bottom:40px;*/
    text-transform: uppercase
}

.postDescription, .pull-left.span-12.postTagURL {
    margin-bottom: 25px
}

    .pull-left.span-12.postTagURL a:after {
        content: ' | ';
        margin-right: 5px
    }

.tagInRepeater {
    display: block;
    float: left
}

.single .postTagURL {
    padding-left: 0
}

.single .singleContent h3 {
    margin-bottom: 50px
}

.single .cta-button-in-detailpage {
    margin: 50px 0
}

.singleContent > div {
    padding-left: 0 !important
}


.pull-left.span-12.postTagURL a:last-child:after {
    content: ''
}

.pull-left.span-12.postTitle h2 a {
    font-size: inherit;
    font-weight: normal
}

.postLink {
    font-weight: bold
}

    .postLink:after {
        content: "\2192";
        font-family: arial
    }

[id*="aBackToResult"]:before {
    content: "\2190";
    font-family: arial;
    padding-right: 10px;
    text-decoration: none
}

[id*="aBackToResult"] {
    text-decoration: none !important;
    padding: 15px 0;
}

.borderBottom {
    border-bottom: 1px solid #ccc;
    margin-bottom: 50px
}

h3 {
    line-height: normal !important
}


.siteSpinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    -webkit-animation: spin 1s linear infinite;
    -moz-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
}

@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
.content-filter .span-3 .row, .riLabel {
    min-height: 40px;
    display: flex;
    justify-content: left;
    align-items: flex-end;
}

.content-filter .span-3 > .rcTable.rcSingle {
    margin-top: 20px
}

.content-filter .span-3 .rcTable.rcSingle .riLabel {
    display: flex
}

.content-filter .RadPicker table.rcTable td:last-child {
    margin-top: 50px
}

.content-filter-search.span-12.clearBoth .search-label.off-screen {
    position: relative;
    left: unset;
    visibility: hidden
}

.news .singleContent img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    max-height: 496px;
    margin-bottom: 60px;
    margin-top: 40px;
}

.news li span {
    position: relative;
    left: 15px;
}

.news .detail .postDate {
    margin-top: 90px;
}

.news .caseStudyBannerHero img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.news .subHeading {
    font-weight: bold;
    margin-bottom: 17px;
    margin-top: 24px;
}

.news .postTagURL.caseStudySpec {
    margin-bottom: 22px !important;
}