:root {
    --bg-color: #212121;
    --red: #d10505;
    --redder: #990505;
}


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


@font-face {
    font-family: 'Roboto';
    src: url("../font/roboto/roboto-thin.woff") format("woff"),
    url("../font/roboto/Roboto-Thin.ttf") format("TrueType");
    font-display: swap;
    font-weight: 100;
}
@font-face {
    font-family: 'Roboto';
    src: url("../font/roboto/roboto-light.woff") format("woff"),
    url("../font/roboto/Roboto-Light.ttf") format("TrueType");
    font-display: swap;
    font-weight: 300;
}
@font-face {
    font-family: 'Roboto';
    src: url("../font/roboto/roboto-bold.woff") format("woff"),
    url("../font/roboto/Roboto-Bold.ttf") format("TrueType");
    font-weight: bold;
}
@font-face {
    font-family: 'Roboto';
    src: url("../font/roboto/roboto-medium.woff") format("woff"),
    url("../font/roboto/Roboto-Medium.ttf") format("TrueType");
    font-weight: 500;
}
@font-face {
    font-family: 'Roboto';
    src: url("../font/roboto/roboto-regular.woff") format("woff"),
    url("../font/roboto/Roboto-Regular.ttf") format("TrueType");
    font-weight: 400;
}



/*------------------------------------------------------------------------------ GERAL  ------------------------------------------------------------------------------*/
html,
body {
    overflow-x: hidden;
    overflow-y: visible;
}

body {
    background: var(--bg-color);
    color: white;
    font-family: 'Roboto', sans-serif;
    font-weight: lighter;
}

.icon {
    width: 20px;
}

.container {
    /* Adjust content in */
    -webkit-box-sizing: border-box;
    /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;
    /* Firefox, other Gecko */
    box-sizing: border-box;
    /* Opera/IE 8+ */
}

.container_padding {
    padding: 0 20px 0 20px;
}

section {
    padding-top: 20px;
}

.section_title {
    font-size: min(7.8vw, 35px);
    font-weight: 700;
    text-align: center;
    margin-bottom: min(5vw, 135px);
}

.section_title spam {
    /* color: var(--red); */
    color: rgb(223, 20, 20);
}

button {
    color: white;
    padding: 8px 10px;
    background: var(--red);
    border: none;
    font-size: 4vw;
}

.button:hover {
    background: var(--redder);
}

/*--------------------------------------------- GERAL - Flex ---------------------------------------------*/
.container_h {
    display: flex;
}

.container_v {
    display: flex;
    flex-direction: column;
}

.space_beetween {
    justify-content: space-between;
}

.space_evenly {
    justify-content: space-evenly;
}

.align-items-center {
    align-items: center;
}

.align-items-end {
    align-items: flex-end;
}

.justify-content-center {
    justify-content: center;
}

.justify-content-around {
    justify-content: space-around;
}

/* ------------------------------------------------------------------------------CABEÇALHO------------------------------------------------------------------------------ */
header {
    max-width: 100%;
    margin-top: 15px;
}

header a {
    text-decoration: none;
    color: white;
}

.logo {
    width: 80%;
}

.logoimg {
    width: 100%;
}

.direita {
    display: flex;
    width: 100%;
    justify-content: flex-end;
}

.socialdiv a {
    margin-left: 10px;
}

.menu {
    margin-left: 30px;
}

.slide {
    display: flex;
}

/*--------------------------------------------- CABEÇALHO - NAV ---------------------------------------------*/
header nav {
    position: relative;
    /* top: -17px;
    width: 150px; */
    right: 70px;
    top: 10px;
}

header .menu_icon,
header input {
    display: block;
}

/*--------------------------------------------- CABEÇALHO - MENU ---------------------------------------------*/

/*------------------------------------------------------------------------------ SEÇÃO PRINCIPAL ------------------------------------------------------------------------------*/

#principal {
    background: url(../img/bg1_1366x600.webp);
    background-size: 100% 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    margin-top: 10px;
    padding-top: 40px;
    height: 50vw;
}

#principal>:first-child {
    height: 100%;
}

#principal>div:first-child>div:first-child {
    height: 90%;
}

#principal h1, #principal h3 {
    font-weight: lighter;
    font-size: 5vw;
    margin-bottom: 30px !important;
}

#principal spam {
    font-weight: bold;
    margin-left: 0;
}

#principal p {
    font-weight: 100;
    font-size: 4vw;
}

#principal .button {
    margin-bottom: 30px !important;
    margin-top: 15px !important;

}

/*------------------------------------------------------------------------------ SEÇÃO SERVIÇOS ------------------------------------------------------------------------------*/
#servicos {
    background: url(../img/bg2_1366x600.webp) no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#servicos h4 {
    font-weight: bold;
    margin-bottom: 10px;
}

#servicos p {
    font-weight: 100;
    margin-top: 10px;
    margin-bottom: 20px;
}

#servicos ul li {
    margin-bottom: 5px;
    font-weight: 100;
}

#servicos button {
    margin-left: 50%;
    transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
}

/*------------------------------------------------------------------------------ SEÇÃO PROJETOS ------------------------------------------------------------------------------*/
#projetos {
    margin-top: 20px;
}

.caroussel1 {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
}

.bt__caroussel_direita,
.bt__caroussel_esquerda {
    display: none;
    position: absolute;
    z-index: 10;
    top: 145%;

    background: transparent;
    border: none;
    height: 35px;
    width: 40px;
    color: white;
    font-size: 25px;

}

.bt__caroussel_direita:hover,
.bt__caroussel_esquerda:hover {
    color: var(--red);
    font-weight: bold;
    border: 2px solid;
}

.bt__caroussel_direita {
    right: 2%;
}

.bt__caroussel_esquerda {
    left: 0.5%;
}

.caroussel {
    position: absolute;
    transition: all ease .5s;
}

#ul_mobile {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
}

.carousel__slide,
.carousel_img {
    max-width: 33vw;
}

.container_projetos {
    display: flex;
    justify-content: center;
}

.item {
    position: relative;
}

.item spam {
    position: absolute;
    z-index: 2;
}

.item_header {
    top: 0;
    font-weight: bold;
    margin-left: 25px;
    margin-top: 20px;
    font-size: 95%;
}

.item_descri {
    margin-left: 25px;
    margin-bottom: 35px;
    bottom: 0;
    writing-mode: vertical-rl;
    -webkit-transform: rotate(180deg);
    /* Saf3.1+, Chrome */
    -moz-transform: rotate(180deg);
    /* FF3.5+ */
    -ms-transform: rotate(180deg);
    /* IE9 */
    -o-transform: rotate(180deg);
    /* Opera 10.5 */
    transform: rotate(180deg);

    height: 100px;
}

.item img {
    opacity: 0.4;
    z-index: 1;
}

.opaca {
    position: relative;
    display: block;
    transition: transform 500ms;
}


.opaca:hover,
.opaca:focus {
    opacity: 1.0;
    transform: scale(1.1);
    z-index: 3;
    cursor: grab;
}

.destaque:hover,
.destaque:focus {
    z-index: 3;
}

/*------------------------------------------------------------------------------ SEÇÃO CONTATO ------------------------------------------------------------------------------*/

#contato .icon {
    width: 25px;
}

#contato .icon,
#contato p {
    margin: 10px;
}

#contato form {
    position: relative;
    flex-wrap: nowrap;
}

#contato div,
#contato form,
#contato form * {
    margin: 10px auto;
    text-align: center;
}

#contato form input {
    background: #545454;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 18.5px;
    padding: 15px;
    text-align: left;
}

#contato textarea {
    overflow: hidden;
    background: #545454;
    /* color: #a8a8a8; */
    color: #fff;
    border: none;
    font-size: 18.5px;
    border-radius: 5px;
    padding-top: 10px;
    padding-left: 15px;
    text-align: left;

}

#contato textarea::placeholder,
#contato input::placeholder {
    color: #ffffff;
    font-family: 'Roboto', sans-serif;
}

#contato address {
    font-weight: 300;
    font-size: max(18px, 1.1vw);
    margin: 0;
    margin-bottom: 20px;
    display: inline-block;
    line-height: 2rem;
}

#contato address a {
    line-height: max(20px, calc(1.1vw + 2px));
}

#contato a {
    text-decoration: none;
    color: white;
}

#contato input,
#contato textarea {
    width: 80vw;
}

#contato button {
    font-size: 110%;
    width: 200px;
}


/*------------- footer -------------*/
footer {
    text-align: center;
    margin-bottom: 5px;
}

















/* 0000000000000000000000000000000000000000000000 RESPONSIVE 000000000000000000000000000000000000000000000000000000 */

@media screen and (min-width: 1000px) {

    /*------------------------------------------------------------------------------ 1000PX GERAL  ------------------------------------------------------------------------------*/
    .container {
        max-width: min(100vw, 1920px);
    }

    .container_padding {
        padding: 0 6vw 0 6vw;
    }

    section {
        padding-top: 25px;
        padding-bottom: 40px;
    }

    .section_title {
        font-size: 35px;
        margin-bottom: 5vw;
    }

    button {
        font-size: max(16px, 1.1vw);
        width: min(15.9vw, 300px);
    }

    /*------------------------------------------------------------------------------ 1000PX HEADER  ------------------------------------------------------------------------------*/
    .logo {
        width: 14.9vw;
        max-width: 200px;
    }

    .menu, nav {
        display: block;
    }

    header .menu_icon,
    .socialdiv,
    header input {
        display: none !important;
    }

    header ul li {
        margin-left: 2vw;
        font-weight: 500;
    }

    header li a:hover {
        border-top: 3px solid white;
    }

    /*------------------------------------------------------------------------------ 1000PX PRINCIPAL  ------------------------------------------------------------------------------*/
    #principal,
    #principal>:first-child {
        height: 35vw;
        padding: 0;
        max-height: 500px;
    }

    #principal .esquerda {
        width: 15%;
        height: 100% !important;
        background-image: linear-gradient(to right, rgba(255, 0, 0, 0), var(--bg-color) 45%);
        font-weight: 300;
    }

    .esquerda hr {
        height: 50px;
        margin: 20px 0;
    }

    .esquerda .icon {
        margin: 2px 0;
    }

    .texto_vertical {
        writing-mode: vertical-rl;
        -webkit-transform: rotate(180deg);
        /* Saf3.1+, Chrome */
        -moz-transform: rotate(180deg);
        /* FF3.5+ */
        -ms-transform: rotate(180deg);
        /* IE9 */
        -o-transform: rotate(180deg);
        /* Opera 10.5 */
        transform: rotate(180deg);

        font-size: max(16px, 1.1vw);
    }

    #principal>:first-child {
        flex-direction: row;
        justify-content: start;
    }

    #principal>:first-child>:nth-child(2) {
        /* width: 200px; */
        justify-content: center;
        margin-left: 30px;
    }

    #principal>:first-child>:nth-child(2) * {
        margin: 5px 0;
    }

    #principal h1, #principal h3 {
        /* font-size: 35px; */
        font-size: min(3.5vw, 65px);
    }

    #principal p {
        font-weight: 100;
        line-height: min(2.7vw, 35px);

        font-size: min(2vw, 30px);
        /* font-size: 20px; */
        max-width: 45vw;

    }

    /*------------------------------------------------------------------------------ 1000PX PROJETOS  ------------------------------------------------------------------------------*/

    .caroussel1 {
        position: relative;
        display: block;
        height: 250px;
        max-height: 250px;
    }

    .bt__caroussel_direita,
    .bt__caroussel_esquerda {
        display: block;
        top: 80%;
    }

    .bt__caroussel_direita:hover,
    .bt__caroussel_esquerda:hover {
        border: none;
    }

    .bt__caroussel_direita {
        right: 5%;
    }

    .bt__caroussel_esquerda {
        left: 3%;
    }

    .item_header {
        font-size: 100%;
    }

    .item_descri {
        height: 180px;
        font-size: 120%;
    }

    /*------------------------------------------------------------------------------ 1000PX SERVIÇOS ------------------------------------------------------------------------------*/

    #servicos>:first-child>:nth-child(2) {
        flex-direction: row;
        width: 100%;
    }

    #servicos h4 {
        font-size: max(20px, 1.1vw);
        margin-bottom: max(10px, 1.1vw);
    }

    #servicos li,
    #servicos p {
        font-size: max(18px, 1.1vw);
    }

    #servicos p {
        width: 42vw;
        max-width: 450px;
    }

    #servicos ul {
        margin-bottom: 1.2vw;
    }

    #servicos>:first-child>:nth-child(2)>:first-child {
        align-items: flex-start !important;
        /* border: 1px solid yellow; */
    }

    #servicos>:first-child>:nth-child(2)>:nth-child(1) {
        margin-right: 20px;
    }

    #servicos>:first-child>:nth-child(2)>:nth-child(2) {
        background: url(../img/sec_services.webp) no-repeat;
        background-size: cover;
        width: 60vw;
        height: 29.32vw;
        max-width: 650px;
        max-height: 317.73px;
    }

    #servicos ul,
    #servicos li {
        list-style: disc;
    }

    /*------------------------------------------------------------------------------ 1000PX PROJETOS  ------------------------------------------------------------------------------*/

    #projetos {
        margin-top: 0;
        /* height: 350px; */
        height: 37vw;
        max-height: 570px;
    }

    .caroussel1 {
        position: relative;
        display: flex;
        justify-content: center;
    }

    .caroussel1 {
        height: 400px;
    }

    .bt__caroussel_direita,
    .bt__caroussel_esquerda {
        display: none;
    }

    .carousel__slide,
    .carousel_img {
        max-width: 25vw;
        height: auto;
    }

    .item_header {
        font-size: 100%;
    }

    .item_descri {
        height: 260px;
        font-size: 120%;
    }

    /*------------------------------------------------------------------------------ 1000PX CONTATO  ------------------------------------------------------------------------------*/

    #contato .section_title {
        margin-bottom: 2vw;
    }


    #contato input,
    #contato textarea {
        width: 43vw;
        max-width: 430px;
    }

}

@media screen and (max-width: 999px) {

    /*------------------------------------------------------------------------------ 600PX GERAL  ------------------------------------------------------------------------------*/
    .container {
        max-width: 100vw;
    }

    .logo {
        width: 40%;
    }

    .button {
        font-size: 18px;
        min-width: 178px;
    }

    /* +++++++++++++++++++++++++ Header - Menu  +++++++++++++++++++++++++ */
    header .menu_icon,
    .socialdiv,
    header input {
        display: block !important;
    }
    .menu_icon{
        position: relative;
        top: -9px;
        right: 5px;
    }


    header .logo {
        max-width: 200px;
    }

    nav>div:first-of-type {
        position: absolute;
    }

    header span {
        padding: 0;
        background: transparent;
        color: white;
        font-size: 1.2em;
        font-variant: small-caps;
        cursor: pointer;
        display: block;
        width: 80px;
        display: flex;
        justify-content: flex-end;

    }

    header ul {
        margin-top: 15px;
    }

    header ul,
    header ul li {
        background: #212121;
        font-size: 17px;
        width: 20px;
    }

    header ul li:hover {
        font-weight: bold;
    }

    header .slide {
        clear: both;
        width: 100%;
        height: 0px;
        overflow: hidden;
        text-align: left;
        transition: height .4s ease;
        display: flex;
        flex-direction: column;
    }

    header .slide li {
        padding: 5px;
    }

    header #touch {
        position: absolute;
        opacity: 0;
        height: 0px;
    }

    header #touch:checked+.slide {
        height: 130px;
    }

    /*------------------------------------------------------------------------------ 600PX SERVICOS  ------------------------------------------------------------------------------*/


    /* +++++++++++++++++++++++++ PRINCIPAL  +++++++++++++++++++++++++ */
    .esquerda {
        display: none;
    }

    #principal h1, #principal h3 {
        font-size: 30px;
        font-size: min(8vw, 40px);
        margin-bottom: 15px;
    }

    #principal p {
        font-size: min(4.4vw, 22px);
        max-width: max(370px, 60vw);
        margin-bottom: 15px;

    }

    #servicos {
        padding-bottom: 15px;
    }

    /*------------------------------------------------------------------------------ 600PX PROJETOS  ------------------------------------------------------------------------------*/
    #projetos {
        margin-top: 0;
    }

    .caroussel1 {
        position: relative;
        display: block;
        min-height: 200px;
        height: 45.8vw;
    }

    .carousel__slide,
    .carousel_img {
        width: 33vw;
        min-height: 185px;
        height: auto;
    }

    .bt__caroussel_direita,
    .bt__caroussel_esquerda {
        display: block;
        top: 90%;
    }

    .bt__caroussel_direita:hover,
    .bt__caroussel_esquerda:hover {
        border: none;
    }

    .bt__caroussel_direita {
        right: 5%;
    }

    .bt__caroussel_esquerda {
        left: 3%;
    }

    .item_header {
        font-size: 100%;
    }

    .item_descri {
        height: max(115px, 20vw);
        font-size: 100%;
    }

}

@media screen and (max-width: 375px) {
    /*------------------------------------------------------------------------------ 375PX GERAL  ------------------------------------------------------------------------------*/

    .container {
        max-width: 375px;
    }

    /*------------------------------------------------------------------------------ 375PX PROJETOS  ------------------------------------------------------------------------------*/

    .caroussel1 {
        position: relative;
        display: block;
        max-height: 200px;
    }

    .caroussel1 {
        height: 300px;
    }

    .carousel__slide,
    .carousel_img {
        /* height: 185px; */
        height: 163px;
        min-height: 163px!important;
        max-height: 163px!important;
    }

    .bt__caroussel_direita:hover,
    .bt__caroussel_esquerda:hover {
        border: none;
    }

    .bt__caroussel_direita {
        right: 5%;
    }

    .bt__caroussel_esquerda {
        left: 3%;
    }

}

@media screen and (max-width: 710px) {

    .bt__caroussel_direita,
    .bt__caroussel_esquerda {
        display: block;
        top: 85%;
    }
}

@media screen and (max-width: 430px) {

    .bt__caroussel_direita,
    .bt__caroussel_esquerda {
        display: block;
        /* top: 75%; */
        top: 63%;
    }
}

@media screen and (max-width: 500px) {
    .item_descri {
        display: none;
    }
}