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


@media only screen and ( max-width: 1440px ){
.lg-screen {display: block!important}
.sm-screen {display: none!important}
#lg-nav {
	position:fixed;
	z-index:2100!important;
	left:64%!important;
	top:0!important;
	display:inline;
	list-style:none;
	min-width:500px;
	}
}
@media only screen and ( max-width: 1280px ) {
.lg-screen {display: block!important}
.sm-screen {display: none!important}	
#lg-nav {
	position:fixed;
	z-index:2100!important;
	left:60%!important;
	top:0!important;
	display:inline;
	list-style:none;
	min-width:500px;
	}
}

@media screen and ( max-width:1152px ) {
.lg-screen {display: block!important}
.sm-screen {display: none!important}
#lg-nav {
	position:fixed;
	z-index:2100!important;
	left:52%!important;
	top:0!important;
	display:inline;
	list-style:none;
	min-width:450px;
	}
    .dark {
		background-color:#c8d7e3;
    background-image:url(../img/head-print-bg.jpg);
    background-repeat: no-repeat;
    background-position:0 100px;
	background-size:100% auto;
	background-attachment:fixed;
	}
    h1 {
        font-size: 16px
    }
    header p {
        font-size: 12px!important
    }

    .main-content {
        margin-top: 400px!important
    }
    .p-intro {
        font-size: 1.3em!important
    }
    .page-head-h2, .page-head-h2-2nd {
        font-size: 36px
    }

.grid-5a h2 {font-size:22px!important;}

}



@media only screen and (max-width: 800px){
    .dark {
		background-color:#c8d7e3;
    background-image:url(../img/head-print-bg.jpg);
    background-repeat: no-repeat;
    background-position:0 100px;
	background-size:100% auto;
	background-attachment:fixed;
	}
	.lg-screen {
        display: none!important
    }
    .sm-screen {
        display: block!important
    }
		.wrapper {
        line-height: 1.3;
        width: 100%!important;
        padding: 10px!important
    }
    .wrapper p {
        font-size: 1rem
    }
    .grids {
        margin: 0!important;
        width: 98%!important;
        margin: 0 auto!important
    }
    .grids [class^=grid-],
    [class^=grid-] {
        width: auto!important;
        float: none!important;
        margin: 0 auto!important;
        padding: 0 1em!important
    }
	.announce {position:relative; display: block; top:120px!important; width:100%; z-index:700;overflow:visible!important; }
		#b1, #b2, #b3 {       
        margin: 0 auto 20px 0!important;
        padding: .6em .6em!important;
		}
.main-content {
        position: relative;
        display: block;
        z-index: 800;
        background: rgba(255, 255, 255, .95);
        overflow: auto!important;
        margin-top: 120px!important;
    }
	
	.p2-main-content {
    position: relative;
    display: block;
    z-index: 800;
    background: rgba(255, 255, 255, .9);
    overflow: auto!important;
    margin-top: 200px!important;
}
.page-head-h2 {
    position: relative;
    display: block;
	top:140px;
    font-size: 32px;
    padding:0;
	line-height:1.2;
	background:rgba(255,255,255,0.5);
}
.page-head-h2-2nd {
    position: relative;
    display: block;
	top:-10px;
    font-size: 32px;
    padding:0;
	line-height:1.2;
}
.white-rad-bg {overflow:auto!important; padding:10px 0!important;}

/* --------------------SMALL NAV -------------------- */

#sm-nav {
	position:fixed;
	z-index:2100!important;
	left:70%!important;
	top:0!important;
}

.menu-i {position:relative;display:block;top:6px;right:6px; font-size:32px}
.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;font-size:18px;transition:.4s}


.panel{display:none;overflow:hidden;text-align:left;padding:12px 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;}
.panel-inner {color:#7fbbf6; text-decoration:none; }
.page-name {color:#fff!important; text-decoration:none;background-color:#194775}
}
/* form */
@media  only screen and (max-width: 580px) {
.container {
		width:100%; padding:0!important;}
#form-main{
	width:100%;
	float:none!important;
	padding:10px;
}
	#form-div{
		margin-left:auto;
		margin-right: auto;
		width: 98%!important;
		padding-left: 4px;
		padding-right:4px;
	}
}

@media only screen and (max-width:425px) {
    body {
        padding: 0!important;
        margin: 0!important;
        width: 100%!important;
        max-width: 425px!important
    }
    .dark {
		background-color:#c8d7e3;
    background-image:url(../img/head-print-bg.jpg);
    background-repeat: no-repeat;
    background-position:0 100px;
	background-size:100% auto;
	background-attachment:fixed;
	}
	.wrapper {
        line-height: 1.3;
        width: 100%!important;
        padding: 10px!important
    }
	    .grids {
        margin: 0!important;
        width: 98%!important;
        margin: 0 auto!important
    }
    .grids [class^=grid-],
    [class^=grid-] {
        width: auto!important;
        float: none!important;
        margin: 0 auto!important;
        padding: 0 1em!important
    }

    .wrapper p {
        font-size: 1rem
    }


    .lg-screen {
        display: none!important
    }
    .sm-screen {
        display: block!important
    }
    h1 {
        font-size: 16px!important
    }
    header {
        position: fixed;
        display: inline-block;
        width: 100%;
        z-index: 2000;
        padding:4px;
        margin: 0!important
    }
	.energycalcservices-logo {position:relative; display:block;margin-right:6px; left:2px; top:2px!important; width:200px!important; height:auto;}
	h1 {
	left:-150px;
	top:10px;
}
.e {color:rgba(255,255,255,0)!important;
font-size: 16px!important;
left:-10px!important;
}
.nergy {
    font-size: 20px!important;
}
.calc-services {
    font-size: 14px!important;
	left:8px!important;
	letter-spacing:2px;
}
    header p {position:relative;display:block!important; text-align:left!important; clear:both; color:#fff; top:8px!important; left:12px!important; font-size:16px!important;}


    .main-content {
        position: relative;
        display: block;
        z-index: 800;
        background: rgba(255, 255, 255, .95);
        overflow: auto!important;
        margin-top: 120px!important;
    }
	
	.p2-main-content {
    position: relative;
    display: block;
    z-index: 800;
    background: rgba(255, 255, 255, .9);
    overflow: auto!important;
    margin-top: 200px!important;
}
.page-head-h2 {
    position: relative;
    display: block;
	top:140px;
    font-size: 32px;
    padding:0;
	line-height:1.2;
	background:rgba(255,255,255,0.5);
}
.page-head-h2-2nd {
    position: relative;
    display: block;
	top:-10px;
    font-size: 32px;
    padding:0;
	line-height:1.2;
}

.announce {position:relative; display: block; top:120px!important; width:100%; z-index:700;overflow:visible!important; }
	#b1, #b2, #b3 {       
        margin: 0 auto 20px 0!important;
        padding: .6em .6em!important;
		}
.p-intro {
    font-size: 1.2em!important;
    line-height: 1.3;
	padding:0!important;
}
    footer {
        background-image: none!important;
        height: 60px
    }
.one-third {max-width:46%; height:auto}
}