﻿html, body { height: 100%; }
#aspnetForm { height: 100%; }
#form1 { height: 100%; }
body { margin: 0px auto; font-family: Roboto, Sans-Serif; font-size: 18px; color: #21445a; text-align: center; text-align: left; color: #000050; background-color: #fbfbfb; }
#wrap { min-height: 100%; margin-bottom: -60px; }
#wrap:after { display: block; }
#main { overflow: hidden; padding-bottom: 60px; }
.page { width: 900px; margin: 0px auto; }

#header { display: block; clear: both; width: 100%; height: 70px; color: #eee; padding: 0px; background-color: #334b91; margin: 0px; }
#logo_div { display: block; float: left; padding-left: 20px; margin-top: 8px; margin-right: 20px; }
#logo_div a { color: #333; text-decoration: none; }
#logo1 { height: 53px; width: 53px; }
#logo2 { height: 25px; width: 200px; position: relative; top: -10px; }
#mobile_menu_button_div { display: none; }
#menu_div { float: right; margin: 10px; }
.Menu2Panel { clear: both; width: 100%; }
#tele_div { float: right; font-size: 18px; font-weight: bold; text-align: right; line-height: 1.4em; color: #eee; margin-top: 25px; padding-right: 10px; }
#menu { display: block; width: 100%; margin: 0px auto; background-color: #c5b47e; }
#mobile-menu { width: 100%; background-color: #222; }

.sms { background-color: #c5b47e; font-family: Sans-Serif; width: 100%; }
.smis a { color: #000; display: block; padding: 7px 10px; font-weight: bold; text-align: center; }
.shs a { background-color: #000; color: #fff; }
.sss a { color: #fff; }

.dms { ssbackground-color: #c5b47e; }
.dmis a { color: #000; display: block; padding: 7px 20px; font-weight: bold; background-color: #c5b47e; }
.dhs a { background-color: #000; color: #fff; }
.dss a { color: #fff; }

.dms { padding:10px; background-color:Transparent !important; }
.dms > table { box-shadow:0px 0px 15px #777; }

#menu { -moz-box-shadow: 3px 3px 4px #aaa; -webkit-box-shadow: 3px 3px 4px #aaa; box-shadow: 3px 3px 4px #aaa; -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#aaaaaa')"; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#aaaaaa'); }

.sms2 { width: 100%; font-size: 24px; }
.smis2 { color: #fff; padding: 0px; }
.smis2 a { padding: 10px 20px; display: block; }
.shs2 a { background-color: #555; }
.sss2 { background-color: #c5b47e; color: #fff; }
.sss2 a { color: #fff; }

#content { vertical-align: top; text-align: left; line-height: 1.8em;  }
#content a { color: #000077; font-weight: bolder; }
#content a:hover { color: #0000aa; }

#content_div { padding: 20px; box-sizing: border-box; overflow: hidden; display: block; width: 100%; }

#img_div { float: left; background-color: Aqua; display: table-cell; }
#text_div { float: left; background-color: Blue; display: table-cell; }

.tbl { display: table; }
.tr { display: table-row; }
.td { display: table-cell; vertical-align: top; padding: 10px; box-sizing: border-box; }

h1 { font-size: 54px; line-height: 1em; font-family: 'Allura'; }
h2 { font-size: 18px; }
h3 { font-size: 16px; }

a img { border: none; }
.td a img { border: 1px solid #000; }

#footer { color: #fff; height: 60px; background-color: #33373a; clear: both; font-size: 13px; padding: 6px; text-align: left; }
#footer a { color: #fff; }
#footer a:hover { color: #fff; }

#copyright { color: #888; display: block; text-align: right; font-size: 10px; padding-right: 10px; }
#copyright a { color: #888; }

.VerificationTextBox { padding: 10px; font-size: 24px; width: 100px; }
.TextBox { padding: 10px; font-size: 16px; width: 400px; }
.InputButton { padding: 10px; font-size: 16px; width: 160px; cursor: pointer; }

@media screen and (max-width: 899px) {
    #main { background-image: none; }
    #wrapper { width: 100%; }
    .page { width: 100%; }
    #header { display: block; height: 70px; color: #eee; background-image: none; background-color: #334b91; padding: 0px; }
    z#logo_div { margin-top: 4px; }
    z#logo_div img { width: 255px; }
    #logo1 { height: 53px; width: 53px; }
    #logo2 { height: 25px; width: 200px; position: relative; top: -10px; }
    #mobile_menu_button_div { display: block; float: left; position: relative; top: 20px; }
    z#tele_div { float: left; font-size: 14px; font-weight: bold; text-align: left; line-height: 1.4em; color: #eee; width: 200px; margin-left: 10px; margin-top: 16px; }
    #menu { display: none; }

    .TextBox { padding: 10px; font-size: 24px; width: 300px; }
    .InputButton { padding: 10px; font-size: 16px; width: 160px; cursor: pointer; }
}

@media screen and (max-width: 799px) {
    .TextBox { padding: 10px; font-size: 24px; width: 200px; }
    .InputButton { padding: 10px; font-size: 24px; width: 200px; cursor: pointer; }
}

@media screen and (max-width: 699px) {
    .TextBox { padding: 10px; font-size: 24px; width: 180px; }
    .InputButton { padding: 10px; font-size: 24px; width: 200px; cursor: pointer; }
}

@media screen and (max-width: 599px) {
    #tele_div { display: none; }
    .tbl { display: block; }
    .tr { display: block; }
    .portfolio .tr { border-bottom: 2px solid #555; margin-bottom: 25px; }
    .td { display: block; vertical-align: top; padding: 10px; box-sizing: border-box; }

    .TextBox { padding: 10px; font-size: 24px; width: 300px; }
    .InputButton { padding: 10px; font-size: 20px; width: 240px; cursor: pointer; }
}

@media screen and (max-width: 399px) {
    #header { height: 50px; }
    #logo1 { display: none; }
    #logo2 { height: 25px; width: 200px; position: relative; top: 0px; }
    #mobile_menu_button_div { display: block; float: left; position: relative; top: 10px; }
    #footer { font-size: 16px; }


    .td a img { width: 100%; height: auto; }
    .td img { width: 100%; height: auto; }

    .TextBox { padding: 10px; font-size: 24px; width: 250px; }
    .InputButton { padding: 10px; font-size: 24px; width: 250px; cursor: pointer; }
}