/*
 * Main style for solarsi template.
 */

/* General style */
body {
    width: 100%;
    height: 100%;
    position: relative;
    font-size: 1.5vw;
    font-family: "Lato", sans-serif;
    color: #000000;
}

section {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 0 3%;
}

.close {
    width: 100%;
    padding-left: 15%;
    padding-right: 15%; 
    padding-top: 2em;
    padding-bottom: 2em;
}

a {
    text-decoration: none;
    color: #000000;
}

#scrollToWork {
    margin-right: 0;
}

.italic {
    font-style: italic;
}

a.bgBeige:hover {
    background-color: #b17c4e;
    color: #FFFFFF!important;
}

a:hover {
    color: #ffcd00!important;
}

.bgYellow a.blue:hover {
    color: #0151e4!important;
}

.button.yellow.bgBlue:hover {
    background-color: #0151e4!important;
    color: #ffcd00!important;
}

.button.bgYellow.blue:hover {
    color: #01389c!important;
    background-color: #ffe066!important;
}

input[type="submit"].yellow.bgBlue:hover {
    background-color: #0151e4!important;
    color: #ffcd00!important;
}

input[type="submit"].bgYellow.blue:hover {
    color: #01389c!important;
    background-color: #ffe066!important;
}

b, strong {
    font-weight: bold;
}

i {
    font-style: italic; 
}

p {
    line-height: 1.5em;
}

.right {
    float: right;
    right: 0;
}

.mobile {
    display: none!important;
}

.left {
    float: left;
    left: 0;
}

.pb-1 {
    padding-bottom: .5em;
}

.col-4 {
    width: 100%;
}

.bg {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.blue {
    color: #01389c!important;
}

.bgBlue {
    background-color: #01389c!important;
}

.bgLightBlue {
    background-color: rgba(1, 56, 156, .8)!important;
}

.yellow {
    color: #ffcd00!important;
}

.bgYellow {
    background-color: #ffcd00!important;
}

.grey {
    color: #BBB7B7;
}

.white {
    color: #FFFFFF;
}

.black {
    color: #000000;
}

.bgGrey {
    background-color: #E7E7E5;
}

.bgDarkGrey {
    background-color: #333333;
}

.bgBlack {
    background-color: #000000;
    color: #FFFFFF;
}

.bgWhite {
    background-color: #FFFFFF;
}

.bgBeige {
    background-color: #BA8C63;
}

.bgLightBeige {
    background-color: rgba(186, 140, 99, .7);
}

.beige {
    color: #BA8C63;
}

.borderBeige {
    border: 2px solid #BA8C63;
}

.button, input[type="submit"] {
    padding: 1em 2em;
    text-align: center;
    display: inline-block;
    text-transform: uppercase;
    border-radius: 5px;
    border: 0;
    font-weight: 700;
    transition: all .5s linear;
    font-family: "Lato", sans-serif;
    cursor: pointer;
    font-size: 1.1em;
    min-width: fit-content;
}

.form-wrapper .button-container {
    justify-content: end!important;
    margin-top: 1em;
}

.form-wrapper .button-container input[type="submit"]{
    padding: 1em 2em;
}

input[type="submit"].bgBeige:hover {
    background-color: #b17c4e;
}

.imgBorder {
    border: 3px solid;
}

.button.transparent {
    border: 2px solid;
}

.title {
    font-size: 3em;
    margin-bottom: .2em;
    font-weight: 700;
    font-family: "Lato", sans-serif;
}

.subtitle {
    font-size: 2.5em;
    margin-bottom: 1em;
    font-weight: 700;
}

.chess-subtitle {
    font-size: 1.2em;
    margin-bottom: .5em;
    font-weight: 500;
}

.subtitle {
    text-transform: uppercase;
    font-size: .9em;
    margin-bottom: 1em;
}

.textBig {
    font-size: 1.5em;
    line-height: 1.3em;
}

.smallText {
    font-size: .8em;
}

.center {
    text-align: center;
}

.photo {
    display: block;
    width: 33%;
    float: left;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    overflow: hidden;
}

.bannerPhoto {
    padding: 14em 0;
}

div, section {
    box-sizing: border-box;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.5em;
}

.col-2 {
    width: 49%!important;
}

.col-3 {
    width: 32%!important;
}

.m-left-2 {
    margin-left: 2%!important;
}

.m-right-2 {
    margin-right: 2%!important;
}

.mb-0 {
    margin-bottom: 0!important;
}

.bgWhatsapp {
    background-color: #03c164;
}

div.cover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* Header style */
header {
    position: fixed;
    z-index: 15;
    width: 100%;
    background-color: rgba(255, 255, 255, 1);
    font-family: "Lato", sans-serif;
}

header div.textBar {
    width: 100%;
    text-align: right;
    padding: 0.5em 5%;
    display: flex;
    justify-content: end;
    align-items: center;
    font-size: .8em;
}

header div.textBar .container {
    width: fit-content;
}

header div.row.bottom {
    width: 100%;
    padding: 0.5em 5%;
    position: relative;
    display: flex;
    min-height: 3em;
    justify-content: space-between;
    align-items: center;
}

header div.row.bottom a#logo {
    width: 13%;
}

header div.row.bottom a#logo img {
    width: 100%;
}

header a {
    color: #000000;
    cursor: pointer;
}

header div.textBar a {
    margin-left: 1em;
    color: white;
}

header div.textBar a i.fa-whatsapp {
    color: #03b05c;
    font-size: 1.5em;
}

header div.textBar a i.fa-whatsapp:hover {
    color: #FFFFFF;
}

header div.textBar p {
    display: inline-block;
}

header a.scroll {
    position: relative;
}

header > div.right nav a.scroll:after {
    content: "";
    position: absolute;
    z-index: -1;
    right: 0;
    width: 0;
    bottom: -5px;
    background: #BA8C63;
    height: 3px;
    transition-property: width;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}

header div.right nav a.scroll:hover {
    color: #BA8C63;
}

header div.right nav a.scroll:hover:after,
header div.right nav a.scroll:focus:after,
header div.right nav a.scroll:active:after {
    left: 0;
    right: auto;
    width: 100%;
}

header > a#logo {
    width: 20%;
    display: block;
    transition: all .5s linear;
}

header > a#logo img {
    width: 100%;
}

header div.right {
    width: 72%;
    text-align: right;
    transition: all .5s linear;
    text-transform: uppercase;
    font-size: .8em;
}

header h3 {
    display: inline-block;
    margin-left: 2%;
}

header div.right nav a {
    margin-right: 2em;
}

header div.right a.bgBeige,
header div.right a.bgWhatsapp {
    padding: 1em 0.5em 1em 0.5em;
    top: 0;
    display: flex;
    align-items: center;
    position: absolute;
    height: 100%;
    box-sizing: border-box;
    right: 8%;
}

header div.right a.bgWhatsapp i {
    font-size: 2.5em;
    padding: 0 1em;
}

header div.right a.bgWhatsapp:hover {
    color: #FFFFFF;
    background-color: #03c164;
}

header div.right ul.menuLang {
    position: absolute;
    top: 0;
    right: 0;
    transition: all .5s linear;
    height: 100%;
    width: 8%;
}

header div.right ul.menuLang li {
    text-align: center;
    background-color: #FFFFFF;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

header div.right ul.menuLang li a {
    font-size: 1em;
    width: 2.5em;
    padding: .7em 1em;
    line-height: 2em;
}

header div.right ul.menuLang li.hiddenLang {
    display: none;
}

header.scroll {
    background-color: #FFFFFF!important;
    border-bottom: 1px solid #F4F3F3;
    overflow: initial;
    border: none;
}

/* Image header section */
div#imageHeader  {
    padding-top: 5em;
}

div#imageHeader div {
    width: 100%;
    background-color: rgba(0, 0, 0, .3);
    min-height: 70vh;
    background-image: url('/images/layout/header.jpg');
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

div#imageHeader div h1,
div#imageHeader div h2 {
    text-align: left;
    color: #FFFFFF;
    width: 100%;
    line-height: 1.3em;
    text-align: center;
    width: 70%;
}

/* About section style */
section.close p.textBig {
    margin: 1em 0;
}

/* Services section*/
div#services {
    position: relative;
    background-image: url('../images/layout/service.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom!important;
}

div#services section {
    position: relative;
    width: 37%;
    padding-top: 5em;
    padding-bottom: 6em;
    margin: 0;
    background-color: #FFFFFF;
    -webkit-box-shadow: 100px 0px 50px #FFFFFF;
       -moz-box-shadow: 100px 0px 50px #FFFFFF;
         -o-box-shadow: 100px 0px 50px #FFFFFF;
            box-shadow: 100px 0px 50px #FFFFFF;
}

div#services section h2.textBig {
    margin: .5em 0;
    text-align: left;
    text-transform: none;
}

div#services section p {
    margin-bottom: 1.5em;
}

/* Reviews page style */
div.coverage {
    margin-top: 0!important;
}

section#reviews {
    width: 100%;
    margin: auto;
    padding: 2em 3%;
    padding-top: 1em;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

div.feed-wrapper {
    width: 100%;
    display: flex;
}

section#reviews > h2 {
    width: 100%;
    text-align: center;
    margin-bottom: 2em;
}

section#reviews .button {
    width: 20%;
    margin: auto;
    margin-top: 1em;
}

div.feed-container {
    position: relative;
    overflow: visible;
    width: 30.33%;
    margin: 1em 1.5%;
    display: flex;
    flex-grow: 1;
    background-color: #FFFFFF;
    border-radius: 20px;
}

div.feed-container p.quote {
    position: absolute;
    font-size: 3em;
    color: var(--green);
    top: -.7em;
    left: .5em;
    z-index: 1;
}

div.feed-container > div {
    width: 100%;
    padding: 3em 5%;
    border-radius: 15px;
}

div.feed-container > div p {
    color: #0151e4!important;
}

div.feed-container > div div#stars {
    color: #E76E18;
    margin-bottom: 2em;
}

div.feed-container > div h6 {
    margin-bottom: .5em;
}

div.feed-container > div h2 {
    margin-top: 1em;
}

.locations {
    margin: auto;
    padding: 2em 10% 0;
}

.locations h2 {
    margin-bottom: 1em;
    color: #ffcd00;
    font-size: 1em;
    font-weight: 600;
}

.locations p {
    color: #01389c;
}

.location-container {
    padding: 2em 10%;
    display: flex;
    gap: 1em;
    justify-content: space-between;
    margin: auto;
}

.location-container h3 {
    padding-right: 1em;
    font-size: 1.2em;
    font-weight: 600;
}

.location-container p {
    color: #01389c;
    width: 70%;
}

.line-yellow {
    border-bottom: 1px solid #ffcd00;
    width: 100%;
    display: block;
    height: 1px;
}

.contact-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2em 3%;
}

.contact-banner-container {
    display: flex;
    align-items: center;
    width: 70%;
    margin: auto;
    padding: 0;
}

.contact-banner .contact-banner-container p {
    margin-right: 1em;
    width: 70%;
}

.products {
    padding: 0;
}

.products .product-titles {
    text-align: center;
    padding: 2em 3%;
}

.products .brands-container {
    display: flex;
    justify-content: space-around;
    padding: 2em 3%;
}

.products .brands-container img {
    max-width: 10%;
    margin: 0 1%;
}

/*services section style*/
section.chess {
    width: 100%;
    padding: 0;
}

section.chess div.row {
    overflow: hidden;
}

section.chess div.imgContainer {
    width: 50%;
}

section.chess div.imgContainer img {
    width: 100%;
    float: left;
}

section.chess div.textContainer {
    width: 50%;
    padding: 3em 5%;
    z-index: 1;
    position: relative;
}

section.chess div.textContainer p {
    line-height: 1.5em;
}

section.chess.only-text div.textContainer ul {
    list-style: disc;
    padding-left: 1.5em;
}

section.chess div.textContainer h2:not(.textBig) {
    margin-bottom: 1em;
    font-size: 1em;
}

section.chess div.textContainer ul {
    list-style: disc;
    margin-top: 1em;
    padding-left: 1em;
    line-height: 1.5em;
}

section.solar-pannels {
    padding: 2em 0;
    background-image: url("/images/layout/pannels-background.jpg");
    position: relative;
}

section.solar-pannels .solar-pannels-container::before{
    content: "";
    background-color: rgba(1, 56, 156, .8);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

section.solar-pannels .solar-pannels-titles h2 {
    font-size: .9em;
    margin-bottom: 1em;
    font-weight: 600;
}

section.solar-pannels .solar-pannels-titles p.textBig {
    margin-bottom: 1em;
}

section.solar-pannels .solar-pannels-titles h3 {
    margin-top: 2em;
}

section.solar-pannels div.cards-container {
    display: flex;
    justify-content: space-around;
    z-index: 1;
    position: relative;
}

section.solar-pannels div.cards-container .card {
    padding: 1em 2%;
    margin:  1em 1%;
    float: left;
    min-height: 100%;
    flex-grow: 1;
    width: 33%;
}

section.solar-pannels div.cards-container .card h3 {
    height: 3em;
    margin-bottom: .5em;
    font-size: 1.2em;
    font-weight: 600;
}

.text-section p {
    margin-bottom: 1em;
}

/* Footer style */
footer {
    overflow: hidden;
    padding-top: 2em;
    padding-bottom: 2em;
    color: #FFFFFF;
    font-size: .8em;
}

footer h2 {
    text-transform: uppercase;
    margin-bottom: .5em;
    color: #FFFFFF;
}

footer a {
    text-decoration: underline;
    color: #FFFFFF;
}

footer div.row {
    width: 100%;
    display: flex;
    align-items: end;
}

footer div.row.logo {
    padding: 0 3% 2em;
}

footer div.row.logo a {
    width: 13%;
}

footer div.row.logo a img {
    width: 100%;
}

footer div.row > div {
    padding: .5em 3%;
    float: left;
    display: flex;
    flex-direction: column;
    justify-content: end;
}

footer div.row > div.left {
    flex-grow: 1;
}

footer div.row > div.right {
    text-align: right;
    padding-left: 0;
    flex-grow: 1;
}

footer div.row > div p .fluid {
    width: 100%;
}

footer div.row > div p {
    margin-bottom: .5em;
    display: flex;
}

footer div.row > div p span {
    margin-right: 2%;
}

footer div.row > img {
    margin-bottom: 1em;
}

footer div.row > div.contacts {
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    align-items: center;
    flex-grow: 1;
    padding: .5em 0;
}

footer div.row > div.contacts h3 {
    margin-bottom: 1em;
}

footer div.row > div.contacts a {
    margin-bottom: .5em;
    display: block;
    text-decoration: none;
    font-size: 1em;
}

footer div.row > div.contacts p {
    margin-top: 1.3em;
    font-weight: 600;
}

footer div.info a i, footer .social a {
    text-decoration: none;
}

footer div.info a i, footer .social a i {
    font-size: 1.7em;
}

footer .social a {
    margin: 1em .3em;
    text-decoration: none;
}

a i.fa-square-facebook:hover {
    color: #1877F2!important;
}

a i.fa-instagram:hover {
    color: #E4405F!important;
}

footer div.info a i.fa-whatsapp {
    color: #03c164;
}

footer div.info a i.fa-whatsapp:hover {
    color: #000000;
}

/* Screen size adjustments */
@media screen and (max-width: 768px) {

    /* General style */
    body, html {
        font-size: 2.2vw;
    }

    .desktop {
        display: none!important;
    }

    .mobile {
        display: block!important;
    }

    .mobile.bgWhatsapp {
        display: flex!important;
    }

    .close {
        width: 100%;
        padding-left: 7%;
        padding-right: 7%;
    }

    div#imageHeader div {
        background-image: url('/images/layout/header-mobile.jpg');
    }

    header div.right nav a.nav {
        display: none;
    }

    header > a#logo {
        width: 30%;
    }

    header div.right {
        width: 40%;
        height: 100%;
    }

    header div.right a.bgWhatsapp {
        justify-content: center;
        align-items: center;
    }

    header div.row.bottom {
        justify-content: center;
    }

    header div.textBar {
        display: none;
    }

    div#imageHeader {
        padding-top: 3em;
    }

    div#services section {
        width: 100%;
        background-color: rgba(255, 255, 255, .8);
        -webkit-box-shadow: none;
           -moz-box-shadow: none;
             -o-box-shadow: none;
                box-shadow: none;
    }

    section#reviews {
        width: 100%;
        padding: 2em 10%;
    }

    div.feed-wrapper {
        flex-wrap: wrap;
        justify-content: center;
    }

    div.feed-container {
        min-width: 47%;
        margin: 1em 1.5%;
        max-width: 47%;
    }

    .locations {
        padding: 1em 10% 0;
    }
    
    .locations h2 {
        text-align: center;
    }

    .location-container {
        padding: 2em 10%;
    }

    .contact-banner-container {
        flex-direction: column;
        text-align: center;
    }

    .contact-banner .contact-banner-container p {
        margin-bottom: 1em;
        width: 100%;
        margin-right: 0;
    }

    section#reviews .button {
        width: auto;
        padding: 1em 2em;
    }

    .products .product-titles {
        padding: 2em 10%;
    }

    .products .brands-container {
        flex-wrap: wrap;
    }

    .products .brands-container img {
        max-width: 23%;
        margin: 0 1% 1em;
    }

    .icon-and-text .icon-and-text-wrapper img,
    .icon-and-text .icon-and-text-wrapper h3 {
        text-align: center;
    }

    .icon-and-text .icon-and-text-wrapper img {
        margin: auto;
        margin-bottom: 1em;
    }

    section.chess.only-text div.textContainer ul {
        text-align: left;
    }

    .icon-and-text {
        padding: 2em 10%;
    }

    .solar-pannels-titles {
        padding: 0 10%;
    }

    section.solar-pannels div.cards-container {
        flex-direction: column;
        padding: 1em 10%;
    }

    section.solar-pannels div.cards-container .card {
        width: 100%;
        margin: 0;
        padding: 1em 5%;
        margin-top: 1em;
    }

    section.chess div.imgContainer {
        width: 100%;
    }

    section.chess div.textContainer {
        width: 100%;
        padding: 3em 10% 0;
        text-align: left;
    }

    section.chess div.textContainer {
        padding-bottom: 3em;
    }

    section.chess div.textContainer h2 {
        text-align: center;
    }

    .form-wrapper {
        padding: 0;
    }

    footer div.row {
        flex-wrap: wrap;
    }

    footer div.row.logo {
        padding: 0 10% 2em;
        align-items: start;
    }

    footer div.row > div.left,
    footer div.row > div.right {
        width: 100%;
        padding: 1em 10%;
    }

    footer div.row.logo a {
        width: 20%;
    }

    footer .left.info h2 {
        text-align: left;
    }

    footer div.row > div.left {
        flex-wrap: wrap;
    }

    footer div.row > div.left i {
        width: 100%;
        margin: 1em 0;
    }

    footer div.row > div.right {
        text-align: start;
    }
    
}

/* Screen size adjustments */
@media screen and (max-width: 576px) {

    /* General style */
    body, html {
        font-size: 4vw;
    }

    .title {
        font-size: 2.4em;
    }

    .col-sm-1 {
        width: 100%!important;
    }

    .m-sm-0 {
        margin-left: 0!important;
        margin-right: 0!important;
    }

    .subtitle {
        font-size: 1.8em;
    }

    .textBig {
        font-size: 1.3em;
    }

    header div.right a.bgWhatsapp {
        right: 17%;
    }

    header > a#logo {
        width: 47%;
    }

    header div.right nav {
        margin-right: 15%;
        font-size: .9em;
        height: 100%;
    }

    header div.right a.bgBeige {
        right: 15%;
    }

    header div.right ul.menuLang {
        width: 15%;
    }

    header div.row.bottom a#logo {
        width: 60%;
    }

    div#imageHeader  {
        padding-top: 6em;
    }

    section#bigSlider a#prev, section#bigSlider a#next {
        top: 3em;
        font-size: 1.5em;   
    }

    section#reviews > div div.left {
        width: 100%;
    }

    section#reviews > div div.right {
        width: 100%;
    }

    section#reviews > div div.right h6 {
        margin-top: 2em;
    }

    div.feed-container {
        width: 100%;
        max-width: 100%;
    }











    section.chess div.imgContainer {
        width: 100%;
        padding: 0;
    }

    section.chess div.imgContainer a.row {
        display: inline-block;
        width: 32.44%;
    }

    section.previewCategoriesIcons > div.left {
        text-align: center;
    }

    section.previewCategoriesIcons .category {
        width: 40%;
    }

    section#location a.button {
        font-size: 1em;
        margin-top: 2em;
    }

    section#form input[type='text'] {
        width: 100%;
        margin-left: 0;
    }

    section#form select {
        margin-bottom: 2em;
    }

    section#form form div.bottom {
        text-align: center;
    }

    .button, input[type="submit"] {
        float: none;
    }

    .sliderCont {
        width: 95%;
        padding-left: 2.5%;
        padding-right: 2.5%;
    }

    div#menu {
        position: relative;
        padding-top: 3em;
        padding-bottom: 3em;
    }

    div#reviewsBox {
        display: block;
        width: 90%;
        padding: 4em 5%;
        margin-bottom: 2em;
    }

    div.feed-wrapper {
        flex-direction: column;
    }

    footer {
        text-align: center;
    }

    footer div.row {
        flex-direction: column;
    }

    footer div.row > div.right {
        margin-top: 0;
        text-align: center;
    }

    footer div.row.logo a {
        width: 50%;
        margin: auto;
    }

    footer .left.info h2 {
        text-align: center;
    }

    footer div.row > div.left.info p {
        justify-content: center;
    }

    footer div.row > div.right a {
        font-size: 1em;
    }

    footer p.social a {
        font-size: 1.5em;
        margin: 0 .5em;
    }

    footer p.social a i {
        font-size: 1.5em;
    }

}