


@media screen and (max-width: 768px) { /* LARGURA menor que 768 */  

    /* MENU_TOP */
    #menu {
        position: relative;
        top: 0!important;
    }
    
    /* LOGO */
    #logo {
        display: none;
    }

    /* MAIN */
    #main {
        /* margin-bottom: 110px; */
    }

    /* ABOUT */
    #about.panel {
        height: auto;
        position: relative;
    }    
    #about .container {
        padding-top: 0;
        padding-bottom: 0;
    }    

    /* WE_DO */
    #we_do {
        background-color: #fff !important;
    }   
    #we_do.panel {
        height: auto;
        position: relative;
    }
    #we_do .container {
        padding-bottom: 0;
    }

    /* GALLERY */
    #images.panel {
        height: auto;
        position: relative;
    }    
    #images .container {
        margin-top: 110px;
        margin-bottom: 30px;
    }    
    #images .container.titulo_images {
        padding-top: 0!important;
    }    
    #gallery.container {
        position: relative;
        margin-top: 0;
        margin-bottom: 0;
    }    
    
    /* WHO_IS */
    #who_is {
        background-color: #fff !important;
    }   
    #who_is.panel {
        height: auto;
        position: relative;
    }
    #who_is .container {
        padding-bottom: 0;
    }
    #who_is img {
        width: 100%;
        height: auto;
    }      

    /* CONTACTS_FORM */
    #contacts_form.panel {
        height: auto;
        position: relative;
    }
    #contacts_form {
        background-color: #fff !important;
    }    
    #contacts_form .container {
        padding-top: 55px;
        padding-bottom: 55px;
    }
    #contacts_form .send {
        padding: 0 3vw;
        margin-top: 25px;
    }    


    /* CONTACTS */
    #contacts_section {    
        display: none;
    }
    #contacts {    
        position: relative;
    }
    #contacts_section_mobile {
        display: block;
    }
    #contacts_section_mobile.panel {
        height: auto;
        position: relative;
    }
    #footer {
        position: relative;
        padding: 0;
        height: 45px;
    }    
    #footer div {
        width: 100px; /* 90px; */
        margin: 0 calc((100% - 90px) / 2);
        float: left;
    }    
    #footer a {
        display: flex;
    }    
    #footer span {
        margin-top: auto;
        margin-bottom: auto;
    }    
}

@media screen and (max-width: 768px) and (min-width: 481px) { /* ipads: LARGURA menor que 768 e maior que 481  */  
    #video {
        display: none;
    }
    #menu {
       top: -100px; 
        height: 60px;
    }
    #menu img {
        margin: 6px 0 0 0 !important;
    }
    ul#lang_menu {
        margin: 19px 0 0 20px;
    }
    #menu span {
        display: none;
    }
	#logo {
        opacity: 1;
	    height: 130px;
	}
    #intro {
        background-size: 200%;
    }
	#intro .text {
        max-height: 60vh;
    }
    .text, 
    #concept .text,
    #intro .text,
    #sustain .text {
        font-size: 10pt;
        padding: 0 50px;
        text-align: justify;
        hyphens: auto;
        height: fit-content;
        max-width: 70%;
    }
    #logo_footer {
        display: none;
    }
    .title {
        margin: 0 0 10px 0;
        font-size: 15pt;
    }
    .contact_box {
        margin: 0;
    }
    .info {
        margin: 5px 0 10px;
    }
    #concept .text,
    #sustain .text {
        left: 0;
        background: transparent;
        top: -10px;
    }
    #sustain {
        background-size: cover;
    }


    /* WE_DO */
    #we_do {
        background-size: 200%;
    }
	#we_do .text {
        max-height: 60vh;
    }
    #we_do .text {
        font-size: 10pt;
        padding: 0 50px;
        text-align: justify;
        hyphens: auto;
        height: fit-content;
        max-width: 70%;
    }

    /* WHO_IS */
    #who_is {
        background-size: 200%;
    }
	#who_is .text {
        max-height: 60vh;
    }
    #who_is .text {
        font-size: 10pt;
        padding: 0 50px;
        text-align: justify;
        hyphens: auto;
        height: fit-content;
        max-width: 70%;
    }
}


@media screen and (max-width: 420px) and (min-width: 320px) { /* phones: LARGURA menor que 420 e maior que 350  */
    #bottom_line {
        display: none;
    }
    #bottom_line.phone {
        display: block;
        box-shadow: 
    }
    #menu {
       top: -100px; 
    }
    #video {
        display: none;
    }
    ul#lang_menu {
        margin: 21px 0 0 20px;
    }
    #lang_menu li {
        font-size: 9pt;
    }
    #menu span {
        display: none;
    }
    #menu img {
        width: 95px;
        margin: 13px 0 0 0;
    }
    #logo {
        opacity: 1;
        height: 130px;
    }
    #intro {
        background-size: 200%;
    }
    #intro .text {
        max-height: 60vh;
    }
    .text, 
    #concept .text,
    #intro .text,
    #sustain .text {
        font-size: 10pt;
        padding: 0 50px;
        text-align: justify;
        hyphens: auto;
        height: fit-content;
        max-width: 70%;
    }
    #logo_footer {
        display: none;
    }
    #footer {
        padding: 0;
    }
    
    .title {
        margin: 0 0 10px 0;
        font-size: 15pt;
    }
    .contact_box {
        margin: 0;
    }
    .info {
        margin: 5px 0 10px;
    }
    #concept .text,
    #sustain .text {
        left: 0;
        background: transparent;
        top: -10px;
    }
    #sustain {
        background-size: cover;
    }



   /* GERAL */
   .titulo {
        font-size: 1.8em;
        font-weight: 800;
        line-height: 1.5em;
        color: #414042;
    }
    .subtitulo {
        font-size: 1.4em;
        font-weight: 100;
        line-height: 1.4em;
        color: #868686;
    }
    .texto {
        font-size: 1.2em;
        font-weight: 100;
        line-height: 1.3em;
        color: #414042;
    }


    /* ABOUT */
    #about .about_box {
        padding-left: 30px; 
        padding-right: 30px; 
        border-left: gray solid 15px;
    }
    #about img {
        display: none;
    }



    /* WE_DO */
    #we_do {
        background-size: 200%;
    }
    #we_do .row {
        margin-bottom: 30px;
    }
    #we_do .texto {
        padding-left: 10%;
        padding-right: 10%;
    }
    #we_do img {
        height: 60px;
    }  

    /* WHO_IS */
    #who_is {
        background-size: 200%;
    }
    #who_is .row {
        margin-bottom: 30px;
    }
    #who_is .texto {
        padding-left: 10%;
        padding-right: 10%;
    }
    
    /* CONTACTS_FORM */
    #contacts_form .header {
        margin-bottom: 30px;
    }
    #contacts_form .form-group {
        margin-bottom: 0.5rem;
    }    
    #contacts_form textarea {
        height: calc(100% - 0.5em);
        min-height: unset;
    }

}


@media screen and (max-width: 320px) { /* phones: LARGURA maior que 320  */
    /* GERAL */
    .titulo {
         font-size: 1.8em;
         font-weight: 800;
         line-height: 1.5em;
         color: #414042;
     }
     .subtitulo {
         font-size: 1.4em;
         font-weight: 100;
         line-height: 1.4em;
         color: #868686;
     }
     .texto {
         font-size: 1.2em;
         font-weight: 100;
         line-height: 1.3em;
         color: #414042;
     }


    /* WE_DO */
    #we_do .texto {
        padding-left: 6%;
        padding-right: 6%;
    }
    #we_do img {
        height: 45px;
    }  

    /* WHO_IS */
    #who_is .texto {
        padding-left: 6%;
        padding-right: 6%;
    }

    /* CONTACTS_FORM */
    #contacts_form .header {
        margin-bottom: 15px;
    }
    #contacts_form .recaptcha {
        transform: scale(0.8);
    }    
    #contacts_form .g-recaptcha {
        margin-top: 0px;
    }    
    #contacts_form .send {
        margin-top: 0;
    }
 
 }

@media screen and (max-height: 812px) and (min-height: 667px) { /* phones: ALTURA menor que 812 e maior que 667  */


    /* ABOUT */
    #about .about_box {
        margin-bottom: 50px!important;
    }
    #about img {
        display: block;
    }    
}

@media screen and (max-height: 420px) and (min-height: 350px) { /* phones: ALTURA menor que 420 e maior que 350  */
    #bottom_line {
        display: none;
    }
    #bottom_line.phone {
        display: block;
        box-shadow: 
    }
    #video {
        display: none;
    }
    ul#lang_menu {
        margin: 21px 0 0 20px;
    }
    #lang_menu li {
        font-size: 9pt;
    }
    #menu span {
        display: none;
    }
    #menu img {
        width: 95px;
        margin: 13px 0 0 0;
    }
    #logo {
        opacity: 1;
        height: 120px;
        bottom: 40px
    }
    #intro {
        background-size: 200%;
    }
    #intro .text {
        max-height: 60vh;
    }
    .text, 
    #concept .text,
    #intro .text,
    #sustain .text {
        font-size: 1.3em;
        padding: 0 50px;
        text-align: justify;
        hyphens: auto;
        height: fit-content;
        max-width: 70%;
    }
    #logo_footer {
        display: none;
    }
    #footer {
        padding: 0;
        height: 60px;
    }
    #footer span {
        float: left;
        margin: 15px 0 0 0;
    }
    #contacts {    
        width: 540px;
        margin: calc((100vh - 180px) / 2) calc((100vw - 500px) / 2);
        height: 150px;
        background: none;
        padding: 20px;
    }
    .title {
        margin: 0 0 10px 0;
        font-size: 15pt;
    }
    .contact_box {
        margin: 0;
    }
    .info {
        margin: 5px 0 10px;
    }
    #concept .text,
    #sustain .text {
        left: 0;
        background: transparent;
        top: -10px;
    }
    #sustain {
        background-size: cover;
    }


    /* WE_DO */
    #we_do {
        background-size: 200%;
    }
    #we_do .text {
        max-height: 60vh;
    }
    #we_do .text {
        font-size: 1.3em;
        padding: 0 50px;
        text-align: justify;
        hyphens: auto;
        height: fit-content;
        max-width: 70%;
    }

    /* WHO_IS */
    #who_is {
        background-size: 200%;
    }
    #who_is .text {
        max-height: 60vh;
    }
    #who_is .text {
        font-size: 1.3em;
        padding: 0 50px;
        text-align: justify;
        hyphens: auto;
        height: fit-content;
        max-width: 70%;
    }
}


