@charset "UTF-8";
#MainFrame { position:fixed; top: 0px; left:0px; width:100%; height:100%; padding-top: 10px; padding-bottom: 40px; webkit-transition: all .45s ease-in-out; moz-transition: all .45s ease-in-out; o-transition: all 45s ease-in-out; transition: all .45s ease-in-out;
}

.exposed#MainFrame {  z-index: 16;  background-color: rgba(0, 0, 0, 0.85); 
}

.bgblue { background-color: rgba(171,205,239, .6); }
.bgpink { background-color: rgba(249,220,250, .6); }
.bgyellow { background-color: rgba(246,247,202, .8); }
body { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 14px; text-align: center; margin: 0px; background-color:#39C; background: url(../p5/images/graphics/sitebackground-ab.jpg) no-repeat center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; overflow-y: scroll; z-index; 1;
}
div {
}
.spot { background-color:#666 }
.pageHighlight {color:#F00; font-weight:bold;}
#topLogo { text-align:center; max-width: 350px; margin-left:auto; margin-right:auto; border: 1px solid #FF3; border-radius: 5px; padding-top:4px; padding-right: 12px; padding-bottom:4px; padding-left: 12px; background-color: rgba(200, 200,200, .5); transition: all 1s ease-in-out; }
#topLogo:hover { background-color: rgba(233, 219,12, .5); }


.brainStormSmall { margin-top: 20px; }

h1 { font-size: 1.7em; font-style: italic; }

#pageBody { background-color: rgba(255, 255, 255, 0.8);  border-radius: 20px; padding-top: 15px; margin-top: 15px; margin-bottom: 45px; }

#upperText { position:relative; top: 0px; margin-bottom: 20px; }

#pageCarousel { position:relative; border-radius: 30px; margin-bottom: 10px; }
#carouselWrapper {  border-radius: 30px;}
.carousel-inner {  border-radius: 30px;}
.carousel-inner .item  {  border-radius: 30px; }

.carousel-inner .item img {  border-radius: 30px; }

.carousel-inner .item img.imgBlurred { -webkit-filter: blur(3px); -moz-filter: blur(3px); -o-filter: blur(3px); -ms-filter: blur(3px); filter: blur(3px); }

.carousel-control {  position: absolute; top: 250px; border-radius: 20px; margin:12px; z-index: inherit; height: 40px; width: 60px;  }

#PlayPause { position:absolute; bottom: 20px; right: 30px; cursor:pointer;}

#PlayButton { width: 60px; height: 40px; background-color: rgba(120, 120, 120, .75); margin-bottom: 3px;  -webkit-tap-highlight-color: #0C0; padding-top: 8px; border-radius: 20px 20px 3px 3px; color:#FFF; }

#PlayButton:hover { background-color: rgba(50, 200, 50, .75); }

#PauseButton { width: 60px; height: 40px; background-color: rgba(120, 120, 120, .75); -webkit-tap-highlight-color: #0C0;  padding-top:8px; border-radius: 3px 3px 20px 20px; color:#FFF; }

#PauseButton:hover { background-color: rgba(200, 50, 50, .75); }

.glyphicon.glyphicon-chevron-left { font-size: 1em; left: 12px;}
.glyphicon.glyphicon-chevron-right { font-size: 1em; left: 25px;}

.carousel-caption {  border-radius: 20px; background-color:rgba(120, 120, 120, .75); padding-left:6px; padding-right:6px; padding-bottom: 6px; margin-bottom: 30px; padding-top:5px;}

.carousel-indicators li { background-color:#999; }
.carousel-indicators li.active { background-color:#FF3; border:#666 1px solid; }

.caroDetails { position:absolute; top: 20px; left: 25px; background-color: rgba(0, 0, 0, .35); border: #FFF; margin-left:auto; margin:5px; border-radius: 15px; -webkit-transform: translate3d(0,0,0); webkit-transition: all .25s ease-in-out; moz-transition: all .25s ease-in-out; o-transition: all .25s ease-in-out; transition: all .25s ease-in-out; padding: 5px; opacity: .0;  }

#pageCarousel .caroDetails.portrayed { opacity: 1; z-index: 400; }

.caroInfoBtn { display: block; position:absolute; top: 20px; right: 20px; background-color: rgba(55, 55, 55, 0.3); width: 42px; height: 42px; z-index: 15; font-size: 1.5em; color:#FFF; padding-top: 6px; border: #FF0 2px solid; border-radius: 21px;  transition: all .75s ease-in-out; cursor:pointer; }

.caroInfoBtn:hover { background-color: rgba(60, 60, 60, 0.6); font-size: 1.9em; padding-top:3px; }

.caroDetails h2 {  text-align:left; background-color:#fff; padding-left:25px; padding-top:10px; padding-bottom:10px;  margin:3px; font-size: 1.2em; border-radius: 15px; }
.caroDetails .detail { /*padding:5px; margin:3px;*/ font-size: .9em; text-align:left; border-radius: 15px; background-color:#fff;  padding-top:5px; padding-bottom: 15px; margin-top:4px;  }
.caroDetails ul { padding:0px; font-size: .9em; text-align:left; list-style-image:none; font-size:.9em; list-style:none;  }

#ColumnTextID { display:block; height:100%; text-align:left; margin-top: 20px; position:relative; margin-bottom: 50px; padding: 1px;}
#ColumnTextID ul { list-style:inside; list-style-type:none; margin-bottom: 0px; }

.columnText ul li {position: relative; left:-25px; }

.lowerText { margin-top: 10px; padding: 1px; }

#roiDots { min-height: 240px; margin-bottom: 15px; margin-top:20px; top: -15px;}

.roiWrapper {  }

.roiDot {  position:relative; top: 0px; background-color:#666; margin-left:auto; margin-right:auto; margin-bottom: 15px; text-align:center; border-radius: 15px; max-width: 200px; webkit-transition: all .25s ease-in-out; moz-transition: all .25s ease-in-out; o-transition: all .25s ease-in-out; transition: all .25s ease-in-out; z-index: 5; -webkit-tap-highlight-color: #F00;  }

.roiDot:hover {
background-color: #006699;  max-width: 220px; top: -10px; margin-bottom: -5px; 
}

.roiWrapper .roiDot:hover {
background-color: #FC3;  max-width: 230px; top: 0px; margin-bottom:11px; margin-bottom: 15px;
}

.roiWrapper .roiCaption:hover { border:#666 solid 1px;}

#contactTab { position:fixed; right: -40px; top: 70px; width: 80px; background-color: rgba(50, 50, 50, .5); font-size: 2.2em; font-weight: 800; color:#FF0; text-align:left; padding-left:10px; padding-bottom: 10px; border-radius: 15px; border:#FD0 solid 2px; webkit-transition: all .25s ease-in-out; moz-transition: all .25s ease-in-out; o-transition: all 35s ease-in-out; transition: all .25s ease-in-out; z-index:30; cursor:pointer;}

#contactTab:hover { position:fixed; right: -20px; background-color: rgba(200, 200, 50, .8); }

.contacTrigger { text-decoration: underline; cursor:pointer;}

#basic-waypoint { background-color:#F00; }

.contactFloat { width: 320px; background-color: rgba(180, 180, 180, .6); position: fixed; top: 45px; right: -290px;  webkit-transition: all .55s ease-in-out; moz-transition: all .55s ease-in-out; o-transition: all .55s ease-in-out; transition: all .55s ease-in-out; z-index:25;   border-radius: 8px; border:#FD0 solid 1px; }

.contactFloat h3 { font-style:italic; margin-top: 3px; margin-bottom:0px; }
.contactFloat p { font-size: .8em; position: relative; top: -16px; font-style:italic; margin-top: 7px; margin-bottom:0px; }

.displayed { right: 30px; top: 135px; background-color:#FFF; border: #666 solid 3px; }



#recaptchad { z-delta: 500!important; position:relative; top: 85px; }

#Xbutton { position:relative; left: 280px; top: -22px; border: 1px solid #CCC; width: 18px; height:22px; text-align:center; border-radius:3px; color:#999;   webkit-transition: all .55s ease-in-out; moz-transition: all .55s ease-in-out; o-transition: all .55s ease-in-out; transition: all .55s ease-in-out; }

#Xbutton:hover { background-color:#CCC; color:#FED909; cursor:pointer; }

.roiCaption { text-align:center; font-size:1.2em; font-weight:300; margin-bottom: 12px; }

#footer { position:fixed; bottom: 6px; display:block; margin-left:auto; margin-right:auto; width: 100%; font-size:.8em; background-color: rgba(52, 52, 52, 0.8); color:#CCC; padding-top: 6px; padding-bottom: 6px; }

.phoneInfo { font-size: 1.2em; font-weight:700; }

.contactFloat button { margin-top: 3px; margin-bottom:3px; }
.form-control { font-size:.8em; line-height:1.2; height:22px; margin-bottom:3px;}

#WebsiteTech { margin-top: 18px; margin-bottom: 14px;}


#WebsiteTech .aWebTech .webTechItem { border:  2px solid; border-color: rgba(111,111,111,0.15); margin: 3px; border-radius: 10px; transition: all .55s ease-in-out; }
#WebsiteTech .aWebTech .webTechItem:hover {  border-color: rgba(240,60,60,0.8)   }

#TrustWave { position:fixed; bottom: 45px; right: 20px; }

/*border:#069 3px solid; color:rgba(200, 220, 220, .8);*/

@media only screen and (max-width: 992px) 

{
#upperText { margin-left: 15px; margin-right: 15px; }
#lowerText { margin-left: 15px; margin-right: 15px; }	
.roiCapsule { height: 240px; display: block;}
#roiDots { min-height: 240px; margin-bottom: 15px; top: 0px; }
.roiDot { top: 5px; margin-bottom:8px;}
.roiDot:hover { background-color: #FC3; max-width: 220px; top: -10px; margin-bottom: -12px; }
.roiWrapper .roiDot:hover { background-color: #006699;  max-width: 240px; position: relative; top: 5px; margin-bottom:8px; }
.displayed {  }
#topLogo { text-align:center; max-width: 350px; position:fixed; top: 0px; left:8px; z-index: 25; padding-right:15px; padding-bottom: 6px; padding-top: 6px; }
.phoneInfo { position:relative; top: 15px; }

}

@media only screen and (max-width: 750px) 

{
#contactTab { top: 120px; }
.contactFloat { width: 270px; position: fixed; top: 40px; right: -255px; }
.roiCapsule { height: 250px; display: block;}
.roiDot { top: 10px; margin-bottom: 16px; }
.roiDot:hover { background-color: #FC3; max-width: 220px; top: 0px; margin-bottom: -4px; }
.roiWrapper .roiDot:hover { background-color: #006699;  max-width: 240px; position: relative; top: 0px; margin-bottom:-23px; }
.contactFloat H3 { padding-bottom:0px; margin-bottom:-10px; }
.displayed { top: 20px; right: 30px; }
.contactFloat button { margin-top: 15px; margin-bottom:15px; }
h3.formOut { position:relative; top: 11px; }

#Xbutton { left: 220px; top: -10px; border: 1px solid ; width: 18px; height:22px; text-align:center;}
.caroInfoBtn { visibility:hidden; }

.contactFloat h3 { font-size: 1.3em; text-align:left; padding-left:10px; position:relative; top: 0px; /*background-color:#0C3;*/ }

}

@media only screen and (max-width: 730px) 

{
.roiDot:hover {  }
}