@media all and (max-width: 1024px)
{
#navbar { font-size: 26px; }
}

@media all and (min-width: 1025px)
{
#navbar { font-size: 30px; }
}


html { min-width: 980px; height: 100%; /* overflow-x: hidden; */ }
body { height: 100%; margin: 0; font-family: verdana, sans-serif; font-size: 14px; background-color: #2168aa; }

a:link {color: #e3ffa7; text-decoration: underline;}
a:visited {color: #e3ffa7; text-decoration: none;}
a:hover {color: #ffffff; text-decoration: none;}
a:active {color: #e3ffa7; text-decoration :none;}

.bgnav { color: #ffffff; background-color: #282828; }

#layout { width: 100%; height: 100%; display: table; margin: auto; }
#contentarea { display: table-cell; vertical-align: middle; }
#header { display: table-cell; width: 100%; height: 100px; box-shadow: 10px 10px 10px 10px rgba(0,0,0,.1); }

.layoutrow { display: table-row; }
.container { margin: auto; padding: 50px; border-radius: 100px; background-color: rgba(255,255,255,.2); border: 3px solid rgba(255,255,255,.08); box-shadow: 10px 10px 10px 10px rgba(0,0,0,.1); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff); }

.box980 { min-width: 860px; max-width: 980px; overflow: hidden; margin-top: 30px; margin-bottom: 30px; }
.demobox { margin: 10px; padding: 10px; border-radius: 10px; color: #444444; background-color: #ffffff; }


#contactbox { width: 500px; }
#navbar { margin: 20px; font-weight: normal; font-family: 'utilityboldcondensed'; line-height: 50px; text-align: center; }
.navtextselected { color: #ffffff !important; }
.navtext { height: 50px; padding-left: 10px; padding-right: 10px; display: inline-block; vertical-align: middle; color: #888888; cursor: pointer; }
.navtext:hover { color: #ffffff; animation: navtextglow .5s ease-out; animation-fill-mode: forwards; -webkit-animation: navtextglow .5s ease-out; -webkit-animation-fill-mode: forwards; }
.navselected { color: #ffffff !important; }
.bigtext { font-size: 22px; }
.tinytext { font-size: 10px; }

.helpbox { margin-top: 15px; margin-bottom: 15px; padding-top: 0px; padding-bottom: 0px; font-size: 10px; color: #272727; background-color: rgba(0,0,0,.1); box-shadow: 0px 0px 5px 5px rgba(0,0,0,.1); }

.inputboxwhite { margin-top: 10px; padding: 2px; padding-left: 10px; padding-right: 10px; border: 1px solid #666666; border-radius: 20px; color: #272727; background-color: #ffffff; }
.contactinputbox { width: 100%; padding: 0; border-width: 0; background-color: #ffffff; font-family: verdana, sans-serif; font-size: 22px; }
.contactmsgbody { height: 100px; max-width: 100%; max-height: 500px; font-family: verdana, sans-serif; font-size: 18px; }
.inputboxbutton { margin: auto; margin-top: 30px; width: 120px; text-align: center; border-radius: 20px; background-color: #ffffff; }
.contactbutton { margin: auto; width: 100px; cursor: pointer; text-align: center; font-family: verdana, sans-serif; font-size: 20px; border-width: 0; color: #888888; background-color: #ffffff; }
.contactbutton:hover { color: #272727; }

.image { display: block; }

#lightbox { display: none; position: absolute; width: 100%; height: 100%; background-color: rgba(255,255,255,.8); }

.lightboxcontent { display: table-cell; text-align: center; vertical-align: middle; }

.gallerybox { display: inline-block; padding: 30px; }
.galleryimage { box-shadow: 10px 10px 10px 10px rgba(0,0,0,.1); }

.gallerythumbnail { margin: auto; }
.gallerythumbnail:hover { box-shadow: 0px 0px 5px 2px #ffffff; animation: navimageglow .5s ease-out; animation-fill-mode: forwards; -webkit-animation: navimageglow .5s ease-out; -webkit-animation-fill-mode: forwards; }

#galleryphoto:hover { box-shadow: 10px 10px 10px 10px rgba(33,104,170,.5); animation: gallyerphotoglow .5s ease-out; animation-fill-mode: forwards; -webkit-animation: galleryphotoglow .5s ease-out; -webkit-animation-fill-mode: forwards; }

.galleryrow { overflow: hidden; margin-top: 10px; margin-bottom: 10px; padding-bottom: 10px; }
.galleryleftcell { float: left; width: 33%; padding-top: 10px; padding-bottom: 10px; }
.gallerycentercell { float: left; width: 34%; padding-top: 10px; padding-bottom: 10px; }
.galleryrightcell { float: right; width: 33%; padding-top: 10px; padding-bottom: 10px; }

#galleryplaceholder { background-repeat: no-repeat; background-position: center; background-size: 100%; position: relative; width: 100%; height: 100%; left: 0; top: 0; right: 0; bottom: 0; }



h1 { margin: 0; padding: 0; font-size: 24px; font-weight: bold; }
h2 { margin: 0; padding: 0; font-size: 20px; font-wieght: bold; }
h3 { margin: 0; padding: 0; font-size: 16px; font-wieght: bold; }

@keyframes navtextglow { 0% { color: #888888; } 100% { color: #ffffff; } }
@-webkit-keyframes navtextglow { 0% { color: #888888; } 100% { color: #ffffff; } }

@keyframes navimageglow { 0% { box-shadow: 0px 0px 10px 10px transparent } 100% { box-shadow: 0px 0px 5px 2px #ffffff; } }
@-webkit-keyframes navimageglow { 0% { box-shadow: 0px 0px 10px 10px transparent; } 100% { box-shadow: 0px 0px 5px 2px #ffffff; } }

@keyframes galleryphotoglow { 0% { box-shadow: 0px 0px 100px 100px transparent } 100% { box-shadow: 10px 10px 10px 10px rgba(33,104,170,.5); } }
@-webkit-keyframes galleryphotoglow { 0% { box-shadow: 0px 0px 100px 100px transparent; } 100% { box-shadow: 10px 10px 10px 10px rgba(33,104,170,.5); } }


.bgblue {
color: #ffffff;
background: #2168aa;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMyMTY4YWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMTY0NTcwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover,  #2168aa 0%, #164570 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#2168aa), color-stop(100%,#164570));
background: -webkit-radial-gradient(center, ellipse cover,  #2168aa 0%,#164570 100%);
background: -o-radial-gradient(center, ellipse cover,  #2168aa 0%,#164570 100%);
background: -ms-radial-gradient(center, ellipse cover,  #2168aa 0%,#164570 100%);
background: radial-gradient(ellipse at center,  #2168aa 0%,#164570 100%);
background-attachment: fixed;
background-repeat: no-repeat;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2168aa', endColorstr='#164570',GradientType=1 );
}

@font-face {
font-family: 'utilityboldcondensed';
src: url('font/UTILITY-webfont.eot');
src: url('font/UTILITY-webfont.eot?#iefix') format('embedded-opentype'),
url('font/UTILITY-webfont.woff') format('woff'),
url('font/UTILITY-webfont.ttf') format('truetype'),
url('font/UTILITY-webfont.svg#utilityboldcondensed') format('svg');
font-weight: normal;
font-style: normal;
}