@charset "utf-8";
/* lite blue: #7fbbf6, lt-blue:hover #4a90e2; dk green:rgba(0,107<84,1)   dk-blue:#194775 */
@import url('https://fonts.googleapis.com/css2?family=Michroma&family=Orbitron:wght@400..900&display=auto');
    @font-face {
    font-family: 'roboto_slabbold';
    src: url('../css/RobotoSlab-Bold-webfont.eot');
    src: url('../css/RobotoSlab-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../css/RobotoSlab-Bold-webfont.woff') format('woff'),
         url('../css/RobotoSlab-Bold-webfont.ttf') format('truetype'),
         url('../css/RobotoSlab-Bold-webfont.svg#roboto_slabbold') format('svg');
    font-weight: normal;
    font-style: normal;
	}
	@font-face {
    font-family: 'open_sansregular';
    src: url('../css/OpenSans-Regular-webfont.eot');
    src: url('../css/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../css/OpenSans-Regular-webfont.woff') format('woff'),
         url('../css/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('../css/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

	@font-face {
	font-family: 'Orbitron';
	src:  url('Orbitron-VariableFont_wght.ttf') format('truetype'),
}

	@font-face {
	font-family: 'Michroma', sans-serif;
	src:  url('Michroma-Regular.ttf') format('truetype'),
}
/* <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 400 to 900*/

.orbitron-head {
  font-family: "Orbitron", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}


.michroma-regular {
  font-family: "Michroma", sans-serif;
  font-weight: 400;
  font-style: normal;
}

html {
    width: 100%;
    padding: 0!important;
    font-size: 18px!important
}

body {
    padding: 0!important;
    font-size: 18px!important;
    margin: 0!important;
    font-family: open_sansregular, sans-serif;
    width: 100%!important;
	    background: #c8d7e3/*#073e63*/;
    background-image:url(../img/head-print-bg.jpg);
    background-repeat: no-repeat;
    background-position: 0 0;
	background-size:cover;
	background-attachment:fixed;
}
/* https://css-tricks.com/snippets/css/transparent-background-images/
https://www.gradient-animator.com/*/
.dark {
    background: #c8d7e3/*#073e63*/;
    background-image:url(../img/head-print-bg.jpg);
    background-repeat: no-repeat;
    background-position: 0 0;
	background-size:cover;
	background-attachment:fixed;
}


.lg-screen {display: block!important;}
.sm-screen {display: none!important;}

.boto,
h2,
h3,
h4,
h5,
h6 {
    font-family: roboto_slabbold, serif
}


header {position:fixed; display:inline; z-index:2000; padding:4px 4px; margin:0 0!important;
-webkit-box-shadow: 0 10px 5px 0px rgba(0,0,0,0.35);box-shadow: 0 10px 5px 0px rgba(0,0,0,0.35);
background: rgba(0,51,102,0.9);top:0; left:0!important; height:100px!important; min-width:100%; }

.energycalcservices-logo {position:relative; display:block; float:left;margin-right:6px; margin-left:2%; top:2px; width:311px; height:auto;}

.e {color:rgba(255,255,255,0)!important;left:-11px!important;}
h1 {
    position:relative;
	text-align:left;
	left:-232px;
	top:20px;
	overflow:visible;
	white-space:nowrap!important;
	padding:2px 0 0 0!important;
	margin:0 0!important;
	line-height:1.1;
	z-index:2010;
}
.e {color:rgba(255,255,255,0)!important;
font-size: 16px!important;
left:-10px!important;
}
.nergy {
    font-family: 'Orbitron', sans-serif; font-weight:400;
    font-size: 28px!important;
    color: #fff!important;
	letter-spacing:2px;
}
.calc-services {
	position:relative;
	display:block;
    font-family: 'Michroma', sans-serif; font-weight:400;
    font-size: 12px!important;
	left:8px!important;
	margin-top:2px!important;
    color: #fff!important;
	letter-spacing:4px;
}
header p {position:relative;display:inline!important; color:#fff; top:0!important; font-size:18px;}
.tel {color:#fff!important; text-decoration:none}
.tel:hover {color:#fff!important; text-decoration:underline!important;}

/* ---------------------------------------------------LG-Nav ---------------------------------------------------- */
#lg-nav {
	position:fixed;
	z-index:2100!important;
	left:60%!important;
	top:0!important;
	display:inline;
	list-style:none;
}
#lg-nav li {float:left; width:150px; text-align:center;}
#lg-nav a, button {color:#fff; text-decoration:none; margin:0!important;}
#lg-nav a:hover, button:hover {color:#fff;}



#page-name, #page-name a, #page-name a:hover {position:relative;display:block;font-size:18px;color:fff; cursor:text!important;padding:12px 0 6px 2px;border-bottom:rgba(255,255,255,0) solid 1px!important; background:#194775!important;}
button { width:150px; outline:none!important; border-top:none;border-right:none;border-bottom:rgba(255,255,255,0) solid 1px!important; border-left:none!important;}
button:hover {border-bottom:rgba(255,255,255,1) solid 1px!important;}
.accordion {position:relative;display:block;text-align:center;padding:12px 0 6px 0;color:#fff;cursor:pointer;outline:0;font-size:18px;transition:.4s; background:none;}

.panel{display:none;overflow:hidden;text-align:left;border-bottom:rgba(255,255,255,0) solid 1px;}
.panel-inner {position:relative;display:block;font-size:18px;color:fff; cursor:default;padding:12px 0 6px 2px;}
.panel-inner {background:#194775;border-bottom:rgba(255,255,255,1) solid 1px!important;}
.panel-inner:hover {background:#a9bdd8/*#4a90e2*/; color:#144372!important;}
.bottom-link {position:relative;display:block;font-size:18px;padding:12px 0 6px 4px;border-bottom:rgba(255,255,255,0) solid 1px;}
.bottom-link:hover {border-bottom:rgba(255,255,255,1) solid 1px;}




/* ===================================================== LAYOUT ================================================ */
.wrapper {
    position: relative;
    display: block;
    width: 100%;
    margin:0;
    padding: 0 0 100px 0!important;
    overflow: auto!important;
}

.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;
}

[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-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}

.main-content {
    position: relative;
    display: block;
    z-index: 800;
    background: rgba(255, 255, 255, .95);
    overflow: auto!important;
    margin-top: 300px!important;
    overflow:auto!important;
}



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

footer {
    position: fixed;
    display: block;
    background: rgba(0,51,102,0.9);
    background-repeat: no-repeat;
    background-size: 138px 52px;
    background-position: right;
    height: 60px;
    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: 20px 0 0 0;
    margin: 0!important
}

.clear {
    clear: both
}

.t-center {
    text-align: center
}
.t-right {
    text-align: right
}


a[href^=tel]{ color:#0ff; text-decoration:none;}


/* main bg styles */
.p2-main-content {
    position: relative;
    display: block;
    z-index: 800;
    background: rgba(255, 255, 255, .9);
    overflow: auto!important;
    margin-top: 200px!important;
}
.p2-second-content {
	position: relative;
    display: block;
    z-index: 800;
    background: rgba(255, 255, 255, .9);
    overflow: auto!important;
    margin-top: 200px!important;
    overflow:auto!important;
}


/* main h2s */
.page-head-h2 {
    position: relative;
    display: block;
    font-size: 48px;
    padding: 130px 0 0 0;
	text-shadow:1px 1px 1px #fff!important;	
    color: #000;
    text-align: center
}
.page-head-h2-2nd {
    position: relative;
    display: block;
    font-size: 48px;
    padding: 0!important;
	text-shadow:1px 1px 1px #fff!important;
    color: #000;
    text-align: center
}
.announce {position:relative; display: block; width:100%; z-index:700;overflow:visible!important; }


.white-rad-bg {background:rgba(255,255,255,0.9); border-radius:12px;overflow:visible!important; padding:10px 0!important;}
.white-rad-bgFormDiv {background:rgba(255,255,255,0.9); border-radius:12px;overflow:visible!important; padding:2rem!important;}
.grid-shadow {-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.35);box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.35);}
.list-dot { list-style: none!important;font-size:18px; color:#000;}
	.list-dot li, .list-dot dd {padding-bottom:8px;}
	.list-dot li:first-child {font-weight:bold; letterspacing:1px;}
	.list-dot dt:first-child {font-weight:bold; letterspacing:1px;}
	.list-dot dt {font-weight:bold; letterspacing:1px; margin:20px auto 6px 0!important;}
	.list-dot span {position:relative; display:inline-block; margin-right:16px; line-height:.6;width:14px; height:14px; border-radius:10px;color:#4a90e2; background-color:#4a90e2}

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

.white-txt {color:#fff;}
.blue-txt {color:#194775;}

.img-scale {
    position: relative;
    display: block;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto!important
}
.one-third {position:relative; display:block; float:left; padding:0 20px 20px 0; max-width:30%; height:auto}

.contact-us a {
    position: relative;
    display: block;
    margin: 1em auto;
    max-width: 240px;
    text-align: center;
    font-family: roboto_slabbold, serif;
    font-size: 24px;
    padding: .5em;
    background: rgba(74, 144, 226, .8);
    color: #fff;
    font-weight: 700;
    text-decoration: none!important
}

.contact-us a:hover {
    background: rgba(74, 144, 226, 1);
    color: #0ff;
    text-decoration: none!important
}

.p-intro {
    font-size: 1.4em!important;
    line-height: 1.3;
	padding:1em 2em 1em 1em;
	margin:0!important;
}

.top-bl-brdr {
    border-top: 1px solid #31a3dd;
    padding: 1rem 0 0 0;
	margin:2em 0 0 0!important;
}


* {
    box-sizing: border-box
}