﻿.gridview
{
    padding: 10px;
    margin: 10px;
    font-size:large;
}
.icon-bar {
    background-color:Black;
}
.gridview .td
{
    padding: 10px;
    margin: 10px;
}
    .gridview .th {
        padding: 10px;
        margin: 10px;
    }

    .gridviewbig{
        padding:20px;
        margin:20px;
    }

.tinted-image {
    background:
    /* top, transparent red, faked with gradient */
    linear-gradient( rgba(255, 0, 0, 0.45), rgba(255, 0, 0, 0.45) ),
    /* bottom, image */
    url(/Content/building.png);
}

#outlinetext {
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
}

.button {
    background: rgb(10,86,164)
}

.button_ltblue {
    background: rgb(10,86,214)
}

.button_ltblue:hover {
    background: rgb(10,86,164)
}

.button:hover {
    background: rgb(10,86,214)
}

.buttonsub {
    background: rgb(198, 182, 182)
}

    .buttonsub:hover {
        background: rgb(151, 133, 133)
    }

.tint {
    z-index: 1;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background: rgba(0, 0, 0, 0.9);
}



.threebullets {
    float: left;
    width: 31%;
    padding-left: 1%;
    padding-right: 1%
}

.bannerdiv {
    width: 100%;
    height: 190px;
    align-content: center;
    align-items: center;
    min-width: 750px
}

.clientpage {
    padding: 50px;
    width: 100%;
    float: left;
    min-width: 750px
}

@keyframes backgroundScroll {
    from {
        background-position: 0px -40px;
    }

    to {
        background-position: 0px -10px;
    }
}

@-webkit-keyframes backgroundScroll {
    from {
        background-position: 0px -40px;
    }

    to {
        background-position: 0px -10px;
    }
}

.absolute-center {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
}

/*###Desktops, big landscape tablets and laptops(Large, Extra large)####*/


    @media screen and (min-width : 768px) {
        /*Style*/

        .clipboard {
            width: 100%;
            height: 500px;
            padding: 50px;
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .clipboardform {
            width: 390px;
            height: 500px;
            background-image: url(/content/clipboard.jpg);
            padding-left: 50px;
            padding-top: 90px;
            float: left;
        }

        .pad50 {
            padding: 50px
        }

        .customerrow {
            width: 100%;
            float: left;
            margin-top: 50px;
            align-content: center;
            margin-bottom: 70px
        }

        .optinEntry {
            padding: 50px;
            margin-top: 25px;
            margin-bottom: 25px;
            background-color: aliceblue
        }

        .associationroll {
            padding-left: 10%;
            padding-right: 10%;
            margin-bottom: 50px;
            max-height: 100px;
            text-align: center
        }

        .homepage1 {
            float: left;
            width: 23%;
            padding-left: 1%;
            min-height: 200px;
        }

        .homepage2 {
            float: left;
            width: 22%;
            padding: 1%;
            margin: 1%;
            font-size:medium;
            background-color: rgb(10,86,164);
            color: white;
            min-height: 200px
        }

        .homepage3 {
            float: left;
            width: 22%;
            padding: 1%;
            margin: 1%;
            font-size: medium;
            background-color: rgb(10,86,164);
            color: white;
            min-height: 200px
        }

        .homepage4 {
            float: left;
            width: 23%;
            padding-right: 1%;
            min-height:200px;
        }
        
        .homepagedivleft {
            height: 260px;
            width: 32%;
            display: block;
            float: left;
            margin-left: 1%;
            margin-top: 10px;
        }



        .homepagedivright {
            height: 260px;
            width: 32%;
            display: block;
            float: right;
            margin-right: 1%;
            margin-top: 10px;
        }

            .homepage33_old:hover {
                background-color: aliceblue;
                transition:1.0s;
                border: solid thin;
            }

        .homepage33:hover .overlay {
            left: 0;
            margin-left: 0;
            transition: left 300ms ease-out;
            border: solid thin;
            border-color:black;
        }


        .homepage33r:hover .overlay2 {
            right: 0;
            margin-right: 0;
            transition: right 300ms ease-out;
            border: solid thin;
            border-color: black;
        }

        .homepage33t:hover .overlaytop {
            top: 0;
            margin-top: 0;
            transition: top 300ms ease-out;
            border: solid thin;
            border-color: black;
        }

        .overlay {
            position: absolute;
            background-color: rgba(240, 248, 255, 0.3);
            width: 100%;
            color: white;
            padding: 0px;
            left: -100%;
            margin-left: 0%;
            bottom: 0;
            transition: left 300ms linear, margin-left 300ms ease-out;
        }

        .overlay2 {
            position: absolute;
            background-color: rgba(240, 248, 255, 0.3);
            width: 100%;
            color: white;
            padding: 0px;
            right: -100%;
            margin-right: 0%;
            bottom: 0;
            transition: right 300ms linear, margin-right 300ms ease-out;
        }

        .overlaytop {
            position: absolute;
            background-color: rgba(240, 248, 255, 0.3);
            width: 100%;
            color: white;
            padding: 0px;
            top: -100%;
            margin-top: 0%;
            bottom: 0;
            transition: top 300ms linear, margin-top 300ms ease-out;
        }

        .homepagedivcenter {
            height: 260px;
            width: 32%;
            display: block;
            margin-left: 1%;
            margin: 0 auto;
            margin-top: 10px;
            position:relative;
        }

        .homepage33_old {
            height: 300px;
            width: 33.3%;
            float: left;
            margin-bottom: 50px;
        }

        .homepage33 {
            height: 300px;
            width: 33.3%;
            position: relative;
            float:left;
            overflow: hidden;
        }

        .homepage33r {
            height: 300px;
            width: 33.3%;
            position: relative;
            float: left;
            overflow: hidden;
        }

        .homepage33t {
            height: 300px;
            width: 33.3%;
            position: relative;
            float: left;
            overflow: hidden;
        }

        .mainimage {
            width: 100%;
            min-height: 450px;
            background: repeat;
            background-attachment: fixed;
            background-size: cover;
            min-width: 500px;
            margin-top: 0px;
            background-image: url(/Content/callers1.jpg)
        }

            .imgclass:hover {
                background: rgba(0, 0, 0, 0.8);
            }

        imgclass {
            
        }
    }

.homepagecontact {
    margin-left: 2%;
    width: 30.5%;
    float: left;
}

.homepageoptin {
    width: 31%;
    background: rgb(10,86,164);
    float: left;
    margin-left: 2%;
    margin:0 auto;
    margin-top: 10px;
    border: solid thin;
    border-color: lightgray;
}

.homepagecertificate {
    margin-left: 2%;
    width: 30%;
    float: right;
    margin-right: 2%;
}

.contact1 {
    width: 31%;
    margin-left:1%;
    margin-right:1%;
    padding:1%;
    color:white;
    float: left;
    font-size: large;
    background-color: rgb(10,86,164);
    min-height:150px;
}
.customerleft {
    height: 160px;
    width: 25%;
    opacity: 0.9;
    float: left;
    margin-left: 7.5%;
    margin-top: 50px;
    background-color: rgb(10,86,164);
    border: solid
}
.customercenter {
    height: 160px;
    width: 25%;
    opacity: 0.9;
    float: left;
    margin-left: 5%;
    margin-top: 50px;
    background-color: rgb(10,86,164);
    border: solid
}
.customerright {
    height: 160px;
    width: 25%;
    opacity: 0.9;
    float: left;
    margin-left: 5%;
    margin-right: 7.5%;
    margin-top: 50px;
    background-color: rgb(10,86,164);
    border: solid
}

.sidebar {
    padding: 50px;
    width: 100%;
    float: left
}

.financial3pics {
    float: left;
    width: 100%
}

.financialeachpic {
    float: left;
    height: 300px;
    width: 33%;
}

.insetboarder img:hover {
        box-shadow: inset 0 0 0 25px #53a7ea;
    }

.border img {
    transition: .5s ease;
}

    .border img:hover {
        box-shadow: 10px 0 0 40px #000000;
        transition: .5s ease;
    }

.productsservices {
    width: 100%;
    float: left;
    padding: 25px
}

.products {
    padding: 1%;
    width: 30%
}

.padding1pct {
    padding: 1%;
    border: thin solid;
}

.programs {
    padding: 1%;
    width: 30%;
    border: thin solid;
}

.keybenefits {
    float: left;
    width: 48%;
    padding-left: 1%;
    padding-right: 1%;
    font-size: large;
    
}

.chart {
    float: left;
    width: 58%;
    padding-left: 1%;
    padding-right: 1%
}

.chart2 {
    float: left;
    width: 38%;
    padding-left: 1%;
    padding-right: 1%;
    font-size: large
}

.optinForm {
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 50px
}


@media screen and (min-width : 767px) and (max-width : 840px) {

    .contact1 {
        margin-left: 10%;
        margin-right: 10%;
        width: 80%;
        margin-top: 20px;
        display: block;
        background-color: rgb(10,86,164);
        min-height:120px;
    }
}
    /*### Smartphones (portrait and landscape)(small)### */
    @media screen and (min-width : 0px) and (max-width : 767px) {
        /*Style*/

        .clipboard {
            width: 100%;
            height: 460px;
            
        }

        .clipboardform {
            width: 390px;
            height: 500px;
            background-image: url(/content/clipboard.jpg);
            padding-left: 50px;
            padding-top: 80px;
            float: left;
        }

        .pad50 {
            padding: 2%
        }

        .customerrow {
            width: 100%;
            float: left;
            margin-top: 0px;
            align-content: center;
            margin-bottom: 20px
        }

        .optinForm {
            padding-left: 2%;
            padding-right: 2%;
            padding-top: 2%
        }

        .optinEntry {
            padding: 1%;
            margin-top: 25px;
            margin-bottom: 25px;
            background-color: aliceblue
        }

        .associationroll {
            max-width: 100%;
            margin-left: 10%;
            margin-right: 10%;
        }

        .homepage1 {
            margin-left: 10%;
            margin-right: 10%;
            margin-top: 10px;
            display: block;
            border: solid thin;
        }

        .homepage2 {
            margin-left: 10%;
            margin-right: 10%;
            margin-top: 10px;
            display: block;
            border: solid thin;
            padding: 4%;
        }

        .homepage3 {
            margin-left: 10%;
            margin-right: 10%;
            margin-top: 10px;
            display: block;
            border: solid thin;
            padding: 4%;
        }

        .homepage4 {
            margin-left: 10%;
            margin-right: 10%;
            margin-top: 10px;
            display: block;
            border: solid thin;
            padding: 4%;
        }

        .homepagedivleft {
            margin-left: 10%;
            margin-right: 10%;
            margin-top: 10px;
            display: block;
        }

        .homepagedivright {
            margin-left: 10%;
            margin-right: 10%;
            margin-top: 10px;
            display: block;
        }

        .homepagedivcenter {
            margin-left: 10%;
            margin-right: 10%;
            margin-top: 10px;
            display: block;
        }

        .mainimage {
            height: 450px;
            background-image: url(/Content/callers_small.jpg);
            background-position: center;
            background-repeat:no-repeat;
        }

        .homepagecontact {
            margin-left: 10%;
            margin-right: 10%;
            width: 80%;
            margin-top: 10px;
            display: block;
        }

        .homepageoptin {
            background: rgb(10,86,164);
            margin-left: 10%;
            margin-right: 10%;
            width: 80%;
            margin-top: 10px;
            border: solid thin;
            border-color: lightgray;
            display: block;
        }

        .homepagecertificate {
            margin-left: 10%;
            margin-right: 10%;
            width: 80%;
            margin-top: 10px;
            display: block;
        }

        .contact1 {
            margin-left: 10%;
            margin-right: 10%;
            width: 80%;
            margin-top: 20px;
            display: block;
            background-color: rgb(10,86,164);
            min-height:120px;
        }

        .customerleft {
            margin-left: 10%;
            margin-right: 10%;
            width: 80%;
            margin-top: 20px;
            display: block;
        }

        .customercenter {
            margin-left: 10%;
            margin-right: 10%;
            width: 80%;
            margin-top: 20px;
            display: block;
        }

        .customerright {
            margin-left: 10%;
            margin-right: 10%;
            width: 80%;
            margin-top: 20px;
            display: block;
        }

        .sidebar {
            padding: 10px;
            width: 100%;
            float: left
        }

        .financialeachpic {
            margin-left: 10%;
            margin-right: 10%;
            width: 80%;
            margin-top: 10px;
            display: block;
        }

        .productsservices {
            width: 100%;
            float: left;
            padding: 5px
        }

        .products {
            margin-left: 0%;
            margin-right: 0%;
            width: 80%;
            margin-top: 20px;
            display: block;
        }

        .programs {
            margin-left: 0%;
            margin-right: 0%;
            width: 80%;
            margin-top: 20px;
            display: block;
            border: thin solid
        }

        .padding1pct {
            margin-left: 0%;
            margin-right: 0%;
            width: 80%;
            margin-top: 20px;
            display: block;
        }

        .keybenefits {
            margin-left: 0%;
            margin-right: 0%;
            width: 80%;
            margin-top: 20px;
            display: block;
        }

        .chart {
            margin-left: 0%;
            margin-right: 0%;
            width: 80%;
            margin-top: 20px;
            display: block;
        }

        .chart2 {
            margin-left: 0%;
            margin-right: 0%;
            width: 80%;
            margin-top: 20px;
            display: block;
        }


        /* DivTable.com */
        .divTable {
            display: table;
            width: 100%;
        }

        .divTableRow {
            display: table-row;
        }

        .divTableHeading {
            background-color: #EEE;
            display: table-header-group;
        }

        .divTableCell, .divTableHead {
            border: 1px solid #999999;
            display: table-cell;
            padding: 3px 10px;
        }

        .divTableHeading {
            background-color: #EEE;
            display: table-header-group;
            font-weight: bold;
        }

        .divTableFoot {
            background-color: #EEE;
            display: table-footer-group;
            font-weight: bold;
        }

        .divTableBody {
            display: table-row-group;
        }


        .homepage33:hover {
            background-color: aliceblue;
            transition: 1.0s;
            padding-bottom: 20px;
        }
    }