@font-face {
    font-family: PantonRegular;
    src: url(../fonts/Panton-Regular.otf);
}

@font-face {
    font-family: PantonBold;
    src: url(../fonts/Panton-Bold.otf);
}

html,
body {
    font-family: 'PantonRegular', sans-serif;
    height: 100%;
    padding: 0;
    margin: 0;
}

.orange {
    color: #f0a122;
}

.white {
    color: #ffffff;
}

.blue {
    color: #044474;
}

.bold {
    font-family: 'PantonBold', sans-serif;
}

/* HEADER */
#hero {
    height: 60vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff url("../images/nergytech_1.png") center center no-repeat;
    background-size: cover;
}

.white-space {
    /* background-color:rgba(0, 128, 0, 0.26) ; */
    width: 20%;
    height: auto;
}

.content {
    width: 60%;
    /* background-color: rgba(255, 0, 0, 0.315); */
    padding-left: 3%;
}

#hero .content img {
    width: 70%;
    height: auto;
}

#produtos {
    color: #044474;
    /* background-color: grey; */
    display: flex;
    justify-content: center;
    align-items: center;

}

.titulo {
    text-align: left;
    font-size: 2vw;
    font-family: 'PantonBold', sans-serif;
}

.images-produtos {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
}

.col-60 {
    width: 60%;
}

.col-40 {
    width: 40%;
}

.margin-left {
    margin-left: 5%;
}

.margin-top {
    margin-top: 8%;
}

.images-produtos img {
    width: 100%;
    height: auto;
}

#localizacao {
    background: #ffffff url("../images/localizacao_bg.png") top center no-repeat;
    background-size: cover;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: top;
    padding-top: 0%;
}

#localizacao .content {
    text-align: left;
}

#localizacao .content-contactos {
    display: flex;
    align-items: top;
    justify-content: space-between;
    flex-direction: row;
}

#localizacao .content-contactos .contacto {
    width: 33%;

}

#localizacao p {
    font-size: 1vw;
    color: #044474;
}

#localizacao a {
    color: #044474;
    text-decoration: none;
}

p {
    padding: 0;
    margin: 0;
}

.nergytech_footer {
    margin-top: 15%;
    margin-bottom: 5%;
    text-align: left;

}

.nergytech_footer img {
    width: 20%;
    height: auto;

}

.padding-p {
    padding: 2px;
}

.margin-p-bottom {
    margin-bottom: 50px;
}

/*FORM*/

#form {
    color: #044474;
    /* background-color: grey; */
    display: flex;
    justify-content: left;
    align-items: center;

}

.content_form {
    width: 60%;
    /* background-color: rgba(255, 0, 0, 0.315); */
    padding-left: 3%;
    padding-bottom: 5%;
}

#contacto_form {
    width: 100%;
    position: relative;
    top: 0;
    text-align: left;
    left: 0;
}

input[type=text],
input[type=email],
input[type=tel],
textarea,
select {
    width: 94%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type=submit] {
    width: 20%;
    background-color: #f0a122;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: #cf8b1d;
}

.departamento {
    font-family: 'PantonRegular', sans-serif;
    color: #044474;
    font-size: 18px;
}

.sucesso {
    font-family: 'PantonRegular', sans-serif;
    color: green;
    font-size: 24px;
    padding-top: 10px;
}

.erro {
    font-family: 'PantonRegular', sans-serif;
    color: red;
    font-size: 24px;
    padding-top: 10px;
}

/*MOBILE*/
@media only screen and (max-width: 800px) {
    #hero {
        height: 40vh;
        background: #ffffff url("../images/nergytech_mobile.png") center center no-repeat;
        background-size: cover;
    }

    #hero .content {
        text-align: center !important;
    }

    #hero .content img {
        width: 100%;
        height: auto;
    }

    .white-space {
        display: none !important;
    }

    .content {
        width: 80%;
    }

    .content_form {
        width: 80%;
        padding-left: 12%;
        padding-bottom: 5%;
    }

    input[type=submit] {
        width: 20%;

    }

    #localizacao {
        background: #ffffff url("../images/contactos_bg_mobile.png") top center no-repeat;
        background-size: cover;
        padding-top: 10%;
    }

    #localizacao .content-contactos .contacto.padding-mobile {
        padding-left: 2%;
        padding-right: 3%;

    }

    .titulo {
        text-align: left;
        font-size: 2.5vw;
        font-family: 'PantonBold', sans-serif;
    }

    #localizacao p {
        font-size: 1.5vw;
        color: #044474;
    }

    .nergytech_footer {
        margin-top: 10%;
        margin-bottom: 5%;
        text-align: left;

    }

    .nergytech_footer img {
        width: 30%;
        height: auto;

    }
}

@media only screen and (max-width: 600px) {

    .images-produtos {
        text-align: left;
        flex-direction: column;
        align-items: flex-start;
    }

    .col-60 {
        width: 70%;
    }

    .col-40 {
        width: 70%;
        margin-top: 5%;
    }

    #localizacao .content-contactos {
        flex-direction: column;
    }

    #localizacao .content-contactos .contacto {
        width: 100% !important;
        margin-top: 2%;
    }

    #localizacao .content-contactos .contacto.padding-mobile {
        padding-left: 0%;
        padding-right: 0%;
        margin-top: 4%;
        margin-bottom: 4%;

    }

}

@media only screen and (max-width: 450px) {
    #hero {
        height: 22vh;
    }

    .titulo {
        text-align: left;
        font-size: 3.5vw;
        font-family: 'PantonBold', sans-serif;
    }

    #localizacao p {
        font-size: 3vw;
        color: #044474;
    }

    .content {
        width: 100%;
        padding-left: 20%;
        padding-right: 20%;
    }

    .content_form {
        width: 100%;
        padding-left: 20%;
        padding-right: 20%;
        padding-bottom: 10%;
    }

    input[type=submit] {
        width: 40%;

    }

}