﻿html, body, form{margin:0px auto !important; padding:0px !important; width:100vw;height:100vh;}

/* default for small screens 1st*/
 body {
        font-family: Avenir, 'Century Gothic', Arial, sans-serif;
        font-size: 1.0em;
        color: #123f5f;
        text-align: center;
  }
  h1 {
        font-size: 1.6em;
        color: #deae38;
        margin: 0px auto 10px auto;
    }

    h2 {
        font-size: 1.2em;
        color: #deae38 !important;
        margin: 0px auto 10px auto !important;
        padding: 0px !important;
        line-height: 0.8;
    }

    h3 {
        font-size: 1.1em;
        color: #123f5f;
        font-weight: bold;
        margin: 0px auto 10px auto;
    }

    h4 {
        font-size: 1.1em;
        color: #000;
        font-weight: bold;
        margin: 0px auto 10px auto;
    }

    p {
        padding: 3px;
        color: #000;
    }
     p.quote {
        padding: 3px;
        color: #123f5f;
        margin:5px auto;
    }
    .banner {
        margin: 0px;
        text-align: center;        
    }

        .banner a, .banner a:hover {
            font-weight: normal;
            font-size: 1.0em;
            color: #000;
            text-decoration: none;
        }

        .banner img.expand {
            width: 30vw;
        }

        .banner img.socialmedia {
            width: 2.0em;
        }
        .banner .search{position:absolute; right:10px; padding-top:10px; text-align:right;}
        .banner .tBox{
              padding: 6px;
              border: none;
              margin-top: 0px;
              margin-right: -2px;              
              width:200px;
              height:24px;
              font-family:Arial !important;
            }       
    .footer {
        color: #fff !important;
        background-color: #123f5f;
        padding:10px 0px;
        font-size:0.85em;
    }
    .footer a, .footer a:hover{text-decoration; font-weight:normal; color:#fff !important;}

    img a {
        border: none;
        text-decoration: none;
    }

    a {
        color: #123f5f;
        font-weight: bold;
        text-decoration: none;
    }

        a:hover {
            color: #deae38;
            font-weight: bold;
            text-decoration: none;
        }

    .content {
        width: 100%;
        text-align: center;
    }

    .home img {
        width: 100% !important;
        height: auto !important;
    }

    .navmenu table {
        width: 100%;
    }

    .navmenu td {
        background-color: #efefef;
        width: 25% !important;
    }

    .navmenu a, .navmenu a:hover {
        font-weight: normal;
        font-size: 1.0em;
        color: #deae38;
        text-decoration: none;
    }

    .blueBG {
        background-color: #123f5f;
        color: #fff;
        text-align: center;
        padding: 4px;
    }

    .grayBG {
        background: rgba(202, 202, 200, 0.5);
    }

        .grayBG .text {
            text-align: left;
            padding: 1em;
            font-size: 1.0em;
            line-height: 1.2em;
        }
         .grayBG img.expand {
            width: 40vw;
        }
          .grayBG #CMImg {
            display:none;
        }

    .whiteBG {
        background: rgba(255, 255, 255, 0.5);
        text-align: center;
        padding: 5px;
        line-height: 1.2em;
    }

        .whiteBG a, .whiteBG a:hover {
            font-weight: normal !important;
        }

        .whiteBG img.expand {
            width: 20vw;
        }
        .whiteBG .home{padding:5px;}
        .whiteBG .LR1{padding:5px;}
        .whiteBG .LR1 ul{margin:5px; padding:5px;}
        .whiteBG .LR2{padding:5px;}
        .whiteBG .LR2 img{width: 40vw;}
        .whiteBG .systems{padding:5px;}
        .whiteBG .contact{padding:5px; color:#000;}
        .whiteBG .contactmedia{padding:5px; color:#000;}
        .whiteBG .contactmedia a{color:#000 !important;}
        .whiteBG img.socialmedia {
            width: 2.0em;
        }
        .whiteBG .tBox, .whiteBG .ddlForm {
            padding: 3px;
            border:solid 1px #272727;            
            height:24px;
            font-family:Arial !important; 
            width:200px;            
        }
        .whiteBG .button {
            padding: 10px;            
            background-color:rgba(202, 202, 200, 0.5);
            border:solid 1px #272727;
            font-family: Avenir, 'Century Gothic', Arial, sans-serif;
            font-size: 1.0em;
            cursor:pointer;
        }
        .whiteBG .reqText {
            color:rgba(202, 202, 200, 0.5);
            padding-left:10px; 
            font-style:italic;
        }
    .goldBG {
        background: rgba(222, 173, 58, 0.2);
        text-align: left;
        padding: 5px;
        line-height: 1.2em;
        border:solid 1px #efefef;
    }
    .virtual{
        width:100%;        
    }
        .virtual table {
            width: 100%;            
        }
        .virtual td {
            width: 33% !important;
            padding-top:40px;
        }
        .virtual img.expand {
            width: 20vw;
        }
        .virtual .icon {
            background-color: #efefef;
            color: #deae38;
            text-align: center;
            padding: 10px;
            line-height: 1.2em;
            font-size:1.2em;
            font-weight:bold;
            width:300px;
            margin:0px auto;
        }
            .virtual .icon a {
                text-decoration: none !important;
                border: none !important;
                color: #deae38;
            }
        .virtual .hover {
            border-radius: 6px;
            background-color: #efefef;
            color: #272727;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            position: absolute;
            z-index: 99;
            text-align: left;
            width: 400px;
            padding: 10px;
        }
/*smaller browsers - flex the virtual td tags*/
@media screen and (max-width: 600px) {
    .virtual td {
        display:flex;
        width:100%;
    }
    .virtual .hover {
        width: 300px !important;
        overflow-wrap:break-word;
    }
}
    /*larger browsers*/
@media screen and (min-width: 600px) {
        body {
            background: #fff url('../images/Globe.png') no-repeat center top !important;
        }

        h1 {
            font-size: 2.0em;
            color: #deae38;
            margin: 0px auto 10px auto;
        }

        h2 {
            font-size: 1.6em;
            color: #deae38 !important;
            margin: 0px auto 10px auto !important;
            padding: 0px !important;
            line-height: 0.8;
        }

        h3 {
            font-size: 1.3em;
            color: #123f5f;
            font-weight: bold;
            margin: 0px auto 10px auto;
        }

        h4 {
            font-size: 1.3em;
            color: #000;
            font-weight: bold;
            margin: 0px auto 10px auto;
        }

        .banner {
            margin: 0px 30px;
            text-align: center;
        }

            .banner a, .banner a:hover {
                font-weight: normal;
                font-size: 1.2em;
                color: #000;
                text-decoration: none;
            }

            .banner img.expand {
                width: 10vw;
            }

            .banner img.socialmedia {
                width: 4.0em;
            }

            .banner .search {
                position: absolute;
                right: 10px;
                padding-top: 10px;
                text-align: right;
            }

            .banner .tBox {
                padding: 6px;
                border: none;
                margin-top: 0px;
                margin-right: -2px;
                width: 250px;
                height: 24px;
            }

        .footer {
            color: #fff;
            background-color: #123f5f;
        }

        img a {
            border: none;
            text-decoration: none;
        }

        a {
            color: #123f5f;
            font-weight: bold;
            text-decoration: none;
        }

            a:hover {
                color: #deae38;
                font-weight: bold;
                text-decoration: none;
            }

        .content {
            width: 100%;
            text-align: center;
        }

        .home img {
            width: 100% !important;
            height: auto !important;
        }

        .navmenu table {
            width: 100%;
        }

        .navmenu td {
            background-color: #efefef;
            width: 33%;
        }

        .navmenu a, .navmenu a:hover {
            font-weight: normal;
            font-size: 2.0em;
            color: #deae38;
            text-decoration: none;
        }

        .blueBG {
            background-color: #123f5f;
            color: #fff;
            text-align: center;
            padding: 3em 5em;
        }

        .grayBG {
            background: rgba(202, 202, 200, 0.5);
        }

            .grayBG .text {
                text-align: justify;
                padding: 20px 100px 20px 10px;
                font-size: 1.3em;
                line-height: 1.6em;
            }

            .grayBG img.expand {
                width: 20vw;
            }

            .grayBG #CMImg {
                display: block;
            }

        .whiteBG {
            background: rgba(255, 255, 255, 0.5);
            text-align: center;
            line-height: 1.6em;
        }

            .whiteBG a, .whiteBG a:hover {
                font-weight: normal !important;
            }

            .whiteBG img.expand {
                width: 20vw;
            }

            .whiteBG .home {
                padding: 35px 200px !important;
            }

            .whiteBG .LR1 {
                padding: 35px 100px 0px 100px !important;
            }

            .whiteBG .LR2 {
                padding: 0px 100px 35px 100px !important;
            }

            .whiteBG .systems {
                padding: 35px 100px 50px 100px !important;
            }

            .whiteBG .contactmedia {
                padding: 35px 100px 10px 70px !important;
                color: #000;
            }

                .whiteBG .contactmedia a {
                    color: #000 !important;
                }

            .whiteBG img.socialmedia {
                width: 6.0em;
            }

            .whiteBG .contact {
                padding: 35px 100px 50px 100px !important;
                color: #000;
            }

            .whiteBG .tBox, .whiteBG .ddlForm {
                padding: 3px;
                border: solid 1px #272727;
                height: 24px;
                font-family: Arial !important;
                width: 400px !important;
            }

        .goldBG {
            padding: 20px !important;
        }

        .virtual img.expand {
            width: 30vw;
        }

        .virtual td {
        }
    }

    /* Validation Summary control*/
    .ValSummary {
        padding: 0px 0px 5px 0px;
        border: solid 0px #990000;
        margin: 0px 0px 10px 0px;
        background-color: #fff;
        width: 90%;
        color: #990000;
        font-weight: normal;
        text-align: left;
    }

        .ValSummary .header {
            text-align: left;
            color: #990000;
            height: 30px;
            padding-left: 10px !important;
            padding-top: 10px !important;
            vertical-align: text-bottom;
        }

        .ValSummary ul {
            padding: 10px;
            margin: 0px;
            margin-left: 5px;
            list-style-position: inside;
        }

        .ValSummary li {
            margin-left: 14px;
            color: #990000;
            list-style-type: disc;
        }
