@charset "utf-8";
@font-face {
font-family : 'roboto_slabbold';
src : url("roboto/RobotoSlab-Bold-webfont.eot");
src : url("roboto/RobotoSlab-Bold-webfont.eot?#iefix") format('embedded-opentype'), url("roboto/RobotoSlab-Bold-webfont.woff") format('woff'), url("roboto/RobotoSlab-Bold-webfont.ttf") format('truetype'), url("roboto/RobotoSlab-Bold-webfont.svg#roboto_slabbold") format('svg');
font-weight : normal;
font-style : normal;
}
@font-face {
font-family : 'open_sansregular';
src : url("../css/open-sans/OpenSans-Regular-webfont.eot");
src : url("../css/open-sans/OpenSans-Regular-webfont.eot?#iefix") format('embedded-opentype'), url("../css/open-sans/OpenSans-Regular-webfont.woff") format('woff'), url("../css/open-sans/OpenSans-Regular-webfont.ttf") format('truetype'), url("../css/open-sans/OpenSans-Regular-webfont.svg#open_sansregular") format('svg');
font-weight : normal;
font-style : normal;
}
html {
width : 100%;
padding : 0 !important ;
font-size : 18px;
}
body {
padding : 0 !important ;
font-size : 18px;
margin : 0 !important ;
font-family : open_sansregular, sans-serif;
width : 100% !important ;
}
.dark {
background : #073e63;
background-image : url(../img/1-head-bg.jpg), url(../img/1-bg-rptr.png);
background-repeat : no-repeat, repeat-x;
background-position : 0 20px, 0 20px;
background-attachment : fixed !important ;
}
.dark2nd {
background : #073e63;
background-image : url(../img/2ndPage-head-bg.jpg);
background-repeat : no-repeat;
background-position : 0 0;
background-attachment : fixed !important ;
background-size : contain;
}
.light {
background : #fff;
}
.logo {
font-family : open_sansregular, sans-serif;
}
.boto, h2, h3, h4, h5, h6 {
font-family : roboto_slabbold, serif;
}
h3, h4, h5, h6 {
margin : 0 !important ;
letter-spacing : 1px;
}
a {
color : rgb(74, 144, 226, 1);
text-decoration : none;
}
a[href^="tel:"] {
color : inherit !important ;
text-decoration : none !important ;
}
a[href^="tel:"]:hover {
border-bottom : 1px solid;
border-bottom-color : inherit !important ;
}
.dk-blue {
color : #073e63;
}
.lt-blue {
color : #6ba4e6;
}
.white-txt {
color : #fff;
}
.ltBG {
background : rgb(74, 144, 226, 0.1);
overflow : auto;
border-radius : 12px;
padding : 1rem 1rem;
}
.ani-intro {
position : fixed;
display : block;
margin : 0 auto 0 24%;
z-index : 500 !important ;
max-width : 84%;
}
.logo-hero {
position : fixed;
display : block;
margin : 30px auto 0 24%;
z-index : 600 !important ;
max-width : 84%;
}
.ani-intro img, .logo-hero img {
max-width : inherit;
}
header {
position : fixed;
display : inline;
z-index : 2000;
padding : 10px 4px !important ;
margin : 0 0 !important ;
box-shadow : 0 10px 5px 0 rgb(0, 0, 0, 0.35);
background : rgb(7, 62, 99, 1) !important ;
top : 0;
left : 0 !important ;
height : 80px !important ;
min-width : 100%;
}
h1 {
position : relative;
display : inline;
font-weight : 500;
font-family : open_sansregular, sans-serif !important ;
font-size : 18px !important ;
color : #fff !important ;
}
header p {
position : relative;
display : inline;
font-size : 15px !important ;
color : #fff;
}
.main-content {
position : relative;
display : block;
z-index : 1000 !important ;
background : rgb(255, 255, 255, 0.95);
overflow : auto !important ;
margin-top : 500px !important ;
padding : 0 !important ;
min-height : 1800px;
}
.main-content2nd {
position : relative;
display : block;
z-index : 1000;
background : rgb(255, 255, 255, 0.95) !important ;
overflow : auto !important ;
margin-top : 260px !important ;
padding : 0 !important ;
min-height : 1200px;
}
.h-page-head {
position : relative;
display : block;
font-size : 40px;
padding : 10px 0;
color : #000;
text-align : center;
}

.page-head-h2 {
position : fixed;
display : block;
font-size : 48px;
top : 140px;
left : 16%;
color : #fff;
letter-spacing : 1px;
z-index : 800 !important ;
}
.wrapper {
position : relative;
display : block;
width : 100%;
margin : 0;
padding : 0 0 100px 0;
overflow : auto;
}
.grids {
position : relative;
display : block;
padding : 0;
width : 1400px;
max-width : 98%;
clear : both;
margin : 0 auto;
list-style : none;
}
[class^="grid-"] {
float : left;
margin : 0 2.679% 1em 0;
padding-right : 20px;
}
.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;
}
.divServ {
float : left;
width : 24%;
margin-right : 4px;
}
.lg-screen {
display : block;
}
.sm-screen {
display : none;
}
nav {
position : fixed;
z-index : 2000 !important ;
width : 60% !important ;
height : 80px;
right : 0;
top : 0 !important ;
text-align : right;
}
nav ul {
list-style : none;
margin : 22px 10px 4px 0;
}
nav li {
position : relative;
display : inline;
font-size : 18px;
}
nav a {
color : #fff !important ;
text-decoration : none;
padding : 0.4rem 0.6rem 0.46rem 0.6rem;
border-bottom : 1px solid rgb(255, 255, 255, 0);
}
nav a:hover {
color : #0ff !important ;
background-color : rgb(13, 66, 88, 0.95);
text-decoration : none;
border-bottom : 1px solid #0ff;
}
nav .open {
color : #fff !important ;
background-color : transparent !important ;
cursor : text;
text-decoration : none;
font-weight : 700;
padding : 0.4rem 0.6rem 0.46rem 0.6rem;
border-bottom : 1px solid #fff;
}
.lg-screen {
display : block;
}
#sm-nav {
display : none;
}
.bot-pad {
clear : both;
height : 200px !important ;
}
footer {
position : fixed;
display : block;
background : #073e63;
background-image : url(../img/ABC-logo-web.png);
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 : #afcdee !important ;
}
footer p {
text-align : center;
color : #fff;
font-size : 14px;
padding : 20px 0 0 0;
margin : 0 !important ;
}
.clear {
clear : both;
height : 80px;
}
.t-center {
text-align : center;
}
.accordion {
color : #053f65;
cursor : pointer;
padding : 18px;
width : 98% !important ;
border : none;
text-align : left;
outline : 0;
font-size : 18px;
transition : 0.4s;
font-family : roboto_slabbold, serif;
}
.accordion:hover, .active {
background-color : #ccc;
}
.panel {
padding : 0 18px;
display : none;
background-color : #fff;
overflow : hidden;
}
.img-scale {
position : relative;
display : block;
max-width : 100% !important ;
}
.outline {
outline : 2px solid #dedede;
border : #fff solid 2px;
}
.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;
letter-spacing : 1px;
text-align : center;
font-family : roboto_slabbold, serif;
font-size : 24px;
padding : 0.5em;
background : rgb(74, 144, 226, 0.8);
color : #fff !important ;
font-weight : 700;
text-decoration : none !important ;
}
.contact-us a:hover {
position : relative;
display : block;
margin : 1em auto;
max-width : 240px;
letter-spacing : 1px;
text-align : center;
font-family : roboto_slabbold, serif;
font-size : 24px;
padding : 0.5em;
background : rgb(74, 144, 226, 1) !important ;
color : #fff !important ;
font-weight : 700;
text-decoration : none !important ;
}
.p-intro {
position : relative;
font-size : 1.4em !important ;
}
.top-bl-brdr {
border-top : 1px solid #31a3dd;
padding : 1rem 0;
}
.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;
letter-spacing : 1px;
}
.list-dot dt:first-child {
font-weight : bold;
letter-spacing : 1px;
}
.list-dot dt {
font-weight : bold;
letter-spacing : 1px;
margin : 20px auto 6px 0 !important ;
}
.list-dot span {
position : relative;
display : inline-block;
margin-right : 16px;
line-height : 0.6;
width : 14px;
height : 14px;
border-radius : 10px;
color : #4a90e2;
background-color : #4a90e2;
}
.prods {
box-shadow : 4px 4px 4px #dedede;
border : #eee solid 1px;
}
.prods img {
margin : 0 auto 1em auto !important ;
}
.prods a {
text-decoration : none !important ;
}
.prods:hover {
box-shadow : 4px 4px 4px #4a90e2;
text-decoration : none !important ;
}
.prods-nolink {
box-shadow : 4px 4px 4px #dedede;
}
.descrip {
border-top : 1px solid #31a3dd;
padding : 2rem;
background-color : #fff;
margin : 1rem auto !important ;
overflow : auto;
}
.descrip p {
padding : 1rem;
line-height : 1.2;
}
.descrip p {
padding : 1rem;
line-height : 1.2;
}
.p-96 {
max-width : 94%;
}
.colors {
float : left;
padding-right : 1rem;
}
.sm-p {
float : left;
font-size : 12px;
}
.prod-broch-container {
position : relative;
display : inline-block;
}
.prod-broch {
float : left;
width : 260px;
}
.anchor {
height : 0 !important ;
}
* {
box-sizing : border-box;
}
.mySlides1, .mySlides2, .mySlides3, .mySlides4 {
display : none;
}
.mySlides1 img, .mySlides2 img, .mySlides3 img, .mySlides4 img {
width : 100%;
max-width : 600px;
vertical-align : middle;
outline : 2px solid #dedede;
border : #fff solid 2px;
}
.mySlides1 p, .mySlides2 p, .mySlides3 p, .mySlides4 p {
text-align : center;
font-weight : 700;
}
.slideshow-container {
width : 100%;
max-width : 600px;
position : relative;
margin : auto;
}
.next, .prev {
cursor : pointer;
position : absolute;
top : 50%;
width : auto;
padding : 16px;
margin-top : -22px;
color : #fff;
font-weight : 700;
font-size : 18px;
transition : 0.6s ease;
border-radius : 0 3px 3px 0;
user-select : none;
background-color : rgb(0, 0, 0, 0.5);
}
.next {
right : 0;
border-radius : 3px 0 0 3px;
}
.next:hover, .prev:hover {
background-color : rgb(0, 0, 0, 0.9);
color : #fff;
}
.less-top {
position : relative;
display : block;
margin-top : 0 !important ;
padding-top : 0 !important ;
}
@media only screen and (max-width: 1440px) {
.grids {
max-width : 92% !important ;
}
nav {
position : fixed;
z-index : 2000 !important ;
width : 60% !important ;
height : 80px;
right : 0;
top : 0 !important ;
text-align : right;
}
nav ul {
list-style : none;
margin : 22px 10px 4px 0;
}
nav li {
position : relative;
display : inline;
font-size : 16px;
}
nav a {
color : #fff !important ;
text-decoration : none;
padding : 0.4rem 0.6rem 0.46rem 0.6rem;
border-bottom : 1px solid rgb(255, 255, 255, 0);
}
nav a:hover {
color : #0ff !important ;
background-color : rgb(13, 66, 88, 0.95);
text-decoration : none;
border-bottom : 1px solid #0ff;
}
nav .open {
color : #fff !important ;
background-color : transparent !important ;
cursor : text;
text-decoration : none;
font-weight : 700;
padding : 0.4rem 0.6rem 0.46rem 0.6rem;
border-bottom : 1px solid #fff;
}
#sm-nav {
display : none;
}
.ani-intro {
position : fixed;
display : block;
margin :0 auto 0 30%;
z-index : 500;
top : 100px;
max-width : 70%;
}
.logo-hero {
position : fixed;
display : block;
margin : 0 auto 0 30%;
z-index : 600;
top : 100px;
max-width : 70%;
}
.ani-intro img, .logo-hero img {
max-width : inherit;
}
}
@media screen and (max-width: 1280px) {
.dark {
background : #073e63;
background-image : url(../img/1-head-bg.jpg);
background-repeat : no-repeat;
background-size : 1152px 400px !important ;
}
nav #LgNav {
display : none !important ;
}
h1 {
font-size : 16px;
}
header p {
font-size : 12px !important ;
}
#LgNav {
display : none !important ;
}
#sm-nav {
position : fixed;
display : block !important ;
z-index : 2000 !important ;
left : 74% !important ;
width : 26%;
font-size : 16px !important ;
}
#sm-nav .live {
position : relative;
display : block;
color : #fff !important ;
background-color : #073e63 !important ;
text-decoration : none !important ;
border-bottom : 1px solid #fff;
text-align : left;
padding : 12px 0 6px 4px;
}
#sm-nav a {
position : relative;
display : block;
color : #7fbbf6 !important ;
background-color : #073e63 !important ;
text-decoration : none !important ;
border-bottom : 1px solid #fff;
text-align : left;
padding : 12px 0 6px 4px;
}
#sm-nav .menu-i {
position : fixed;
display : block;
top : 6px;
right : 10px !important ;
font-size : 32px;
}
#sm-nav .accordion {
background-color : rgb(7, 62, 99, 0);
color : #fff;
cursor : pointer;
border : none !important ;
outline : 0;
font-size : 16px;
transition : 0.4s;
}
#sm-nav .nav-panel {
display : none;
overflow : hidden;
top : 10px !important ;
}
.ani-intro {
margin : 80px auto 0 30% !important ;
z-index : 500 !important ;
max-width : 68%;
}
.logo-hero {
margin : 80px auto 0 30% !important ;
z-index : 600 !important ;
max-width : 68%;
}
.main-content {
margin-top : 400px !important ;
}
.p-intro {
font-size : 1.3em !important ;
}
.page-head-h2 {
font-size : 36px;
}
#energy {
top : 10%;
right : 20px;
bottom : -800px;
width : 40%;
min-width : 400px;
height : 40%;
min-height : 500px;
}
.offer h2 {
font-size : 1.8em;
padding : 0 !important ;
margin : 0 !important ;
}
.offer p {
font-size : 24px !important ;
}
}
@media screen and (max-width: 912px) {
.lg-screen {
display : none !important ;
}
.sm-screen {
display : block !important ;
}
.wrapper {
line-height : 1.3;
width : 100% !important ;
padding : 0 !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 ;
}
.divServ {
width : auto !important ;
float : none !important ;
margin : 0 auto !important ;
padding : 0 1em !important ;
}
header {
width : 100% !important ;
}
#sm-nav .menu-i {
position : fixed;
display : block;
top : 22px;
right : 10px !important ;
font-size : 32px;
}
.ani-intro {
margin : 80px auto 0 30% !important ;
z-index : 500 !important ;
max-width : 68%;
}
.logo-hero {
margin : 80px auto 0 30% !important ;
z-index : 600 !important ;
max-width : 68%;
}
.main-content {
margin-top : 300px !important ;
min-height : 1200px;
}
.main-content2nd {
margin-top : 140px !important ;
padding : 0 !important ;
min-height : 1200px;
}

.h-page-head {
font-size : 30px;
padding : 0 0 10px 0;
color : #000;
text-align : center;
}
.p-intro {
font-size : 1.2em !important ;
}
footer {
background-image : none !important ;
height : 60px;
}
footer p {
font-size : 12px;
}
footer img {
display : none !important ;
}
.vx2 {
height : 1.8rem;
width : 1.8rem;
font-family : Tahoma, Geneva, sans-serif;
font-weight : 500;
color : #fff !important ;
}
.vx2 a {
background-color : #09C !important ;
color : #fff !important ;
border-radius : 0.9rem;
}
.vx2 a:hover {
background-color : #6CF !important ;
color : #fff !important ;
border-radius : 0.9rem;
}
.page-head-bg {
position : relative;
display : block;
margin : 60px 0 !important ;
width : 100%;
height : 100px;
background-image : url(../img/2nd-pg-bannerRPTR.png);
background-position : left top;
background-repeat : repeat-x;
clear : both !important ;
}
.page-head-h2 {
font-size : 40px;
top : 70px !important ;
left : 20%;
}
.dark2nd {
background-position : 0 40px !important ;
}
.colors {
padding : 0 1rem 1rem 0 !important ;
}
.sm-p {
float : left;
text-align : center !important ;
}
.mySlides1 p, .mySlides2 p, .mySlides3 p, .mySlides4 p {
font-size : 0.85em !important ;
font-weight : 700;
}
.img-scale {
position : relative;
display : block;
max-width : 100% !important ;
margin-left : auto;
margin-right : auto !important ;
}
}


@media screen and (max-width: 550px) {
html, body {font-size:16px;}
#sm-nav .menu-i {
position : fixed;
display : block;
top : 36px!important;
right : 10px !important ;
font-size : 32px;
}
.ani-intro {
margin : -40px auto 0 1% !important ;
z-index : 500 !important ;
max-width : 98%!important ;
}
.logo-hero {
margin : -40px auto 0 1% !important ;
z-index : 600 !important ;
max-width : 98%!important ;
}

/* --------pages------- */
.dark2nd {
background : #073e63;
background-image : none!important ;
background-attachment: none !important ;
}
.page-head-h2 {
position : relative;
display : block;
font-size : 30px;
top : 140px;
left:auto;
text-align:center;
color : #fff;
letter-spacing : 1px;
z-index : 800 !important ;
}
.main-content2nd {
position : relative;
display : block;
z-index : 1000;
overflow : auto !important ;
margin-top : 0 !important ;
padding : 0 !important ;
min-height : 1200px;
}
.h-page-head {
font-size : 22px;
padding : 0 0 10px 0;
color : #000;
text-align : center;
}
}

@media screen and (max-width: 425px) {
html, body {font-size:16px;}
#sm-nav .menu-i {
position : fixed;
display : block;
top : 0!important;
right : 10px !important ;
font-size : 32px;
}
.ani-intro {
margin : 0 auto 0 1% !important ;
z-index : 500 !important ;
max-width : 98%!important ;
}
.logo-hero {
margin : 0 auto 0 1% !important ;
z-index : 600 !important ;
max-width : 98%!important ;
}

/* --------pages------- */
.dark2nd {
background : #073e63;
background-image : none!important ;
background-attachment: none !important ;
}
.page-head-h2 {
position : relative;
display : block;
font-size : 30px;
top : 140px;
left:auto;
text-align:center;
color : #fff;
letter-spacing : 1px;
z-index : 800 !important ;
}
.main-content2nd {
position : relative;
display : block;
z-index : 1000;
overflow : auto !important ;
margin-top : 0 !important ;
padding : 0 !important ;
min-height : 1200px;
}
.h-page-head {
font-size : 22px;
padding : 0 0 10px 0;
color : #000;
text-align : center;
}
}