@charset "utf-8";
/* CSS Document */



html {
	width: 100%;
    padding: 0!important;
    font-size: 18px!important;
	font-family: Arial, sans-serif;
	background-color:#164970;
	background:url(../images/pebTecBG.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position:0 0;
}
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}
.lg-screen {display: block!important;}
.sm-screen {display: none!important;}


/* ===================================================== LAYOUT ================================================ */

.grids {
    position: relative;
    display: block;
    padding: 40px 0 0 0!important;
    width: 1600px!important;
    max-width: 98%!important;
    clear: both;
    margin: 0 auto!important;
    list-style: none;
}
.content {padding: 16px;z-index:1;}

[class^="grid-"]{float:left;margin:0 2.679% 0 0;}
.grids [class^="grid-"]{margin:0 0 0 2.679%;}

.grid-1 { width: 3.571%}
.grid-2 { width: 9.821%}
.grid-3 {width: 16.071%}
.grid-4 {width: 22.321%}
.grid-5 {width: 28.571%}
	.grid-5a {width: 30%}
.grid-6 { width: 34.821%}
.grid-7 {width: 41.071%}
.grid-8 {width: 47.321%}
.grid-9 { width: 53.571%}
.grid-10 {width: 59.821%}
.grid-11 {width: 66.071%}
.grid-11a {width: 66.071%;margin: 0!important;}
.grid-12 {width: 72.321%}
.grid-13 {width: 78.571%}
.grid-14 {width: 84.821%}
.grid-15 {width: 91.071%}
.grid-16 { width: 97.321%;margin: 0}

.clr {clear: both; padding:0 0; margin:0 0!important;}

/* HEAD LINES============================================================================== */
h2 {font-size:3rem;padding:0!important; font-weight:100;}
h3 {font-size:2.6rem; font-weight:100;}
h4 {font-size:1.8rem; font-weight:100;}


/* HEADER======================================================================================= */
.header {
	position:fixed;
	top:0!important;
	left:0!important;
	display: inline-block!important;
	height:auto;
	width:100%!important;
    z-index:200!important;
	background: #00b4d8;
	box-shadow: 10px 10px 5px rgba(16,54,84,.6);
}
.logo {float:left!important; border-radius:16px; width:60px; height:60px; margin:8px 8px!important;padding:0 0!important}
.branding {position:relative;float:left; padding:0 0 2px 0; margin:0 0; width:auto;}
i {color:#fff!important;}
h1 {font-family:Arial, Helvetica, sans-serif;font-size:2rem; font-weight:100!important;padding:0 0!important; margin:10px 0 0 0!important; line-height:1; color:#fff;}

.branding p {display:block; padding:0 0!important; margin:6px 0 0 0!important; font-size:16px; font-weight:bold; line-height:1; color:#12476e;}
.branding p a {font-weight:100;color:#fff; text-decoration:none;}
.branding p a:hover {color:#12476e;}


/* Lg NAV=====================================================================================================================*/
#lg-nav {
	position:fixed;
	display:inline;
	right:0;
	top:0;
	margin:0 0;
	padding:8px 8px 0 0;
	list-style:none;
}
#lg-nav li {float:left; width:150px; text-align:center; font-weight:100;}
#lg-nav a, button {color:#fff; text-decoration:none; margin:0!important; background: rgba(0,0,0,0)!important;}
#lg-nav a:hover {color:#12476e;}
#here {color:#fff!important; text-decoration:underline!important;}


/* STYLES=========================================================== */

.white {color:#fff}
.gold {color:#f5e128}
.whiteBdr {outline:2px solid #fff}
.ltBlue {color:#7dcdf8;}

.bgBlueTrans {position:relative; display:block; margin: 20px 20px!important;padding:0 20px!important;background-color: rgba(16,54,84,.8); border-radius: 16px; color:#fff;overflow:auto;}
.bgBlueTrans .tel {color:#fff!important; text-decoration:none}
.bgBlueTrans .tel:hover {color:#00b4d8!important; text-decoration:underline!important;}
.servicePanel {text-align:center; color:#fff!important;}
.servicePanel ul {list-style:none;}
.servicePanel p {padding:10px 10px!important;}
.servicePanel .tel {color:#fff!important; text-decoration:none}
.servicePanel .tel:hover {color:#00b4d8!important; text-decoration:underline!important;}
.revLink {color:#fff; text-decoration:none;}
.revLink:hover {color:#7dcdf8; text-decoration:none;}
.minHT{height:100px!important;}
.minHT2{height:68px!important;}
.img-scale {
    position: relative;
    display: block;
    max-width: 98%;
    margin-left: auto;
    margin-right: auto!important
}

.tR {text-align:right}
.tCntr {text-align:center;}
.lg {text-align:right; font-size:1.6rem;}
.topPad {position:relative; display:block; height:450px}
.topPad2 {position:relative; display:block; height:200px}

/* The Modal (background) */
.cta-button {
	position:relative;
	display:block;
	padding: 20px 20px;
	margin:-10px 0 20px auto!important;
	float:right;
	border:1px solid #fff;
	border-radius:8px;
	background-color: #c59504!important; /* For browsers that do not support gradients */
	background-image: linear-gradient(to right, #f5e128 , #c59504 , #f5e128)!important;
	font-size:1.2rem;
	font-weight:bold;
	color:#fefefe;
	text-shadow: 1px 1px #444;
}
.cta-button:hover {
	background-color: #f5e128!important/* #00b4d8; /* For browsers that do not support gradients */;
	background-image: linear-gradient(to right, #c59504 , #f5e128 , #c59504)!important;
	border:1px solid #fff!important; color:#fff;text-shadow: 1px 1px #000;
}

.grow { transition: all .2s ease-in-out; }
.grow:hover { transform: scale(1.1); }

/* MODAL==================================================================*/
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  width:50%!important;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  color:#000;
}

/* Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

/* === Calconic Calculator Styling === */

/* Optional section wrapper (recommended) */
.calconic-wrap {
  max-width: 980px;
  margin: 40px auto;
  padding: 0 16px;
}

/* The calculator embed container itself */
.calconic-wrap .calconic-calculator {
  width: 100%;
  min-height: 520px;      /* helps prevent "blank" look while loading */
  overflow: visible;      /* prevents clipping */
}

/* Nice card style around the calculator */
.calconic-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}


/* Optional: loading placeholder text before the embed appears */
.calconic-loading {
  font-size: 16px;
  opacity: 0.7;
  padding: 16px 0;
}




/* FOOTER====================================*/

.bot-pad {
    clear: both;
    height: 200px!important
}

footer {
    position: fixed;
    display: block;
    background: #00b4d8;
    height:auto;
    width: 100%;
    left: 0;
    bottom: 0;
    z-index: 3000
}

footer a {
    color: #9ff!important
}

footer p {
    text-align: center;
    color: #fff;
    font-size: 14px;
    padding: 4px 0;
    margin: 0!important
}

/* MOBILE STYLES - - Secondary Pages */
@media only screen and ( max-width: 1440px ){ }
@media only screen and ( max-width: 1280px ) { }
@media screen and ( max-width:1152px ) { }

@media screen and (max-width:1024px){
.lg-screen {display: block!important;}
.sm-screen {display: none!important;}
}

@media only screen and (max-width: 800px){ 
html {background-image:url(../images/pebTecBG.jpg); background-repeat:no-repeat; background-attachment:fixed; background-size: 100% auto; background-position:0px 20px;background-color:#e1f7ff;}
body{padding:0!important;margin:0!important;width:100%!important}

.lg-screen {display:none!important}
.sm-screen{display:block!important}
.topPad {position:relative; display:block; height:240px}
.bot-pad {clear: both; height: 80px!important}
.tR {text-align:center!important;}
.grids{margin:0!important;width:98%!important;margin:1% auto 1% 1%!important}
.grids [class^=grid-],[class^=grid-], .bgBlueTrans {width:auto!important;float:none!important;margin:2% 1%!important;padding:1.6rem!important}

h1 {font-size:1.8rem;}
h2 {font-size:2rem}
h3 {font-size:1.8rem}
h4 {font-size:1.6rem}

#sm-nav {position:fixed; display:block; right:0!important; top:0!important;z-index:3000; margin:0 0; padding:0 0!important;}
.menu-i {position:relative;display:block; top:10px; font-size:36px;}

.page-name {position:relative;display:block;font-size:18px;color:#fff; cursor:default;padding:12px 0 6px 4px;}
.accordion {background-color:#194775;color:#fff;cursor:pointer;width:150px;border:none!important;outline:0;transition:.4s}
.panel{display:none;overflow:hidden;text-align:left;padding:16px 0 6px 4px; }
.panel-inner, .page-name {position:relative;display:block; text-align:left;font-size:16px;padding:12px 0 6px 6px!important;text-align:left; border-bottom:1px solid #fff; background:#00b4d8;}
.panel-inner {color:#03045e; text-decoration:underline; }
.panel-inner : hover  {color:#0ff; text-decoration:underline; }
.page-name {color:#fff!important; text-decoration:none;background-color:#00b4d8}
.minHT{height:auto!important;}
.minHT2{height:auto!important;}
}

@media  only screen and (max-width: 580px) {
.topPad2 {height:100px!important}
.grids{margin:0!important;width:98%!important;margin:1% auto 1% 1%!important}
.grids [class^=grid-],[class^=grid-]{width:auto!important;float:none!important;margin:2% 1%!important;padding:1.6rem!important}
.branding p {font-size:14px!important;}
}

@media only screen and (max-width:425px) { 
.branding {margin:0 0 0 8px!important; width:auto!important;}
.logo {display:none!important;}
h1 {font-size:30px!important;}
.topPad {height:200px}
.accordion {width:134px!important;font-size:14px!important;}
}