/******
colors:
 - logo green: #34a753
 - logo darker green: #189339
 - logo lighter green: #DBEBB2
 - logo grey: grey
 - lighter grey: #EFEFEF
******/

@import "fonts.css"; 

/*** START: new css ****/
body {
    font-size: 16px;
    font-family: "Segoe UI", "Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    color: #666;
}
a:link {
    color:#189339;
    text-decoration: none
}
a:visited {
    color:#34a753;
    text-decoration: none;
}
a:hover {
    color: grey;
}
h3 {
    color: #34a753;
    font-size: 1.7rem;
    padding: 1rem 0px 0px;
}
h4 {
    color: #34a753;
    font-size: 1.5rem;
    padding: 0.5rem 0px;
}
h5 {
    color: #666;
    font-size: 1.1rem;
    padding: 0.2rem 0px 0px;
}

/** START: classes **/

/* START: general */
.page-container {
    box-shadow: 0px 0px 15px 0px #cccccc;
    -webkit-box-shadow: 0px 0px 15px 0px #cccccc;
    -moz-box-shadow: 0px 0px 15px 0ox #cccccc;
}
.content-container {
    padding: 1rem 2rem;
}
.xpp-name-front, .xpp-name-back {
    font-weight: bolder;
}
.xpp-name-front {
    color: #34a753;
}
.xpp-name-back {
    color: grey;
}
.awesome-icon {
    color: #34a753; 
    font-size: 5rem;
}
.phone-icon {
    font-size: 0.8rem;
}
.back-button, .back-to-top-button {
    float: right;
    margin-top: 0.5rem;
    font-size: 0.9rem;
}
.back-button:after, .back-to-top-button:after  {
    font-family: 'Font Awesome 5 Free';
    font-size: 1.1rem;
  	font-weight: 900;
    padding-left: 0.5rem;
}
.back-button:before {
    content: 'back';
}
.back-button:after {
    content: '\f0a9';
}
.back-to-top-button:before {
    content: 'back to top';
}
.back-to-top-button:after {
    content: '\f0aa';
}
.top-bar {
    background-color: #c6df84; 
    color: #189339; 
    font-size: 0.8rem;
    padding: 0.2rem 1rem;
}
.top-bar .link {
    font-weight: 600;
}
.top-notification {
    background-color: #ff2121; 
    color: #FFF; 
    font-size: 0.9rem;
}
.top-notification a {
    color: #DBEBB2; 
}
.top-notification a:hover {
    color: #34a753; 
}
/** END: general +**/

/* START: header */
.header-logo {
    height: 100px;
    background: url(/assets/images/logo/logo-top.png);
    background-repeat: no-repeat;
    background-size: cover;
}
/* allow whole image to bne clickable */
.header-logo a { 
    display: inline-block;
    height: 100px;
    width:100%
}
/* END: header */

/* START: menu */
.menu {
    background-color: #DBEBB2;
}
.navbar-toggler-icon i {
    color:#63A76E; 
    font-size:30px;
}
.dropdown-menu {
    border-top: 0px;
    border-color: #DBEBB2;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}
.dropdown:hover>.dropdown-menu {
    display: block;
}
.nav-item {
    margin: 0px 0.5rem;
}
/* hover dropdown menus */
@media only screen and (max-width: 991px) {
    .navbar-hover .show > .dropdown-toggle::after{
        transform: rotate(-90deg);
    }
}
@media only screen and (min-width: 992px) {
    .navbar-hover .collapse ul li{position:relative;}
    .navbar-hover .collapse ul li:hover> ul{display:block}
    .navbar-hover .collapse ul ul{position:absolute;top:100%;left:0;min-width:250px;display:none}
    .navbar-hover .collapse ul ul ul{position:absolute;top:0;left:100%;min-width:250px;display:none}
}

/* END: menu */

/* START: breadcrumbs */
#breadcrumbs {
    background-color: #EFEFEF;
    height:25px;
    width: 100%;
    padding:4px;
    text-align: left;
    font-family: "Trebuchet MS",sans-serif;
    font-size:13px;
}
/* END: breadcrumbs */

/* START: footer */
.footer {
    background-color: #189339;
    padding: 1rem;
}
.footer a {
    font-size: 0.8rem;
    color: white;
}
.footer a:hover {
    text-decoration: underline;
}
.footer .social i {
    font-size: 2rem;
    color: white;
}
.footer .copyright {
    font-size: 0.7rem;
    color: white;
}
/* END: footer */

/* START: index */
.index-section {
    width: 100%;
    background-attachment: scroll;
    background-position: center;
    background-repeat: repeat-x;
    background-size: cover;
    opacity: 0.5;
    transition: opacity 600ms;
}
.index-section:hover {
    opacity: 0.8;
}
.services > div:nth-child(1) {
    height: 420px;
    background-image: url("/assets/images/installation.jpg");
}
.services > div:nth-child(2) {
    background-color: #FFF;
}
.markets > div:nth-child(2) {
    height: 420px;
    background-image: url("/assets/images/commercial.jpg");
}
.markets > div:nth-child(1) {
    background-color: #DBEBB2;
}
.additional-services > div:nth-child(1) {
    height: 420px;
    background-image: url("/assets/images/callcentre.jpg");
}
.additional-services > div:nth-child(2) {
    background-color: #EFEFEF;
}
.recharge > div:nth-child(2) {
    height: 300px;
    background-image: url("/assets/images/recharging.jpg");
}
.recharge > div:nth-child(1) {
    background-color: #DBEBB2;
}
.register > div:nth-child(1) {
    height: 250px;
    background-image: url("/assets/images/support.jpg");
}
.register > div:nth-child(2) {
    background-color: #EFEFEF;
}
.mainmeters > div:nth-child(1) {
    height: 370px;
    background-image: url("/assets/images/flats.jpg");
}
.mainmeters > div:nth-child(2) {
    background-color: #FFF;
}
.markets i, .additional-services i, .recharge i, .register i {
    color: #34a753; 
    font-size: 5rem;
}
/* END: index */

/* START: request forms */
.right-section {
    background-color: #DBEBB2;
    color: #34a753;
    height: 100%;
    padding: 2rem 1rem 2rem 2rem;
}
/* END: index */

/* START: submeters */
.meter-layout {
    display:block;
    background-image: url('/assets/images/submeters/meter-layout.jpg');
    background-repeat: no-repeat; 
    *background-position: left top; 
    padding-top:268px;
    width: 100%;
    background-size: cover;
}
/* END: submeters */

/* START: forms */
.btn-primary {
    background-color: #34a753;
    border-color: #189339;
}
.btn-primary:hover {
    background-color: #189339;
    border-color: #34a753;
}
.btn-outline-primary {
    border-color: #189339;
    color: #189339;
}
.btn-outline-primary:hover {
    background-color: #189339;
    border-color: #34a753;
}
.form-control:focus {
    border-color: #DBEBB2;
    box-shadow: 0 0 0 0.05rem #34a753;
}
.required-field:after {
    content: ' *';
    color: red;
}
.contact-alt {
    background-color: #DBEBB2;
}
/* END: forms */

/* START: meters */
.meter-img {
    float: right;
    margin: 1rem;
    width: 150px;
}
.meter-detail-img {
    float: right;
    margin: 1rem;
    width: 300px;
}
/* END: meters */

/** END: classes **/

/** START: media queries **/

@media (max-width: 575.98px) { 
    .services > div:nth-child(1) {
        height: 150px;
    }
    .meter-detail-img {
        width: 200px;
    } 
}

@media (min-width: 576px) and (max-width: 767.98px) { 
    .services > div:nth-child(1) {
        height: 200px;
    }
 }

@media (min-width: 768px) and (max-width: 991.98px) {  }

@media (min-width: 992px) and (max-width: 1199.98px) {  }

@media (min-width: 1200px) { 
 }

/** END: media queries **/

/*** END: new css ***/