html{
    overflow: hidden;
}

*, html {
	scroll-behavior: smooth !important;
}

a {
    color: inherit;
    text-decoration: inherit;
}


.body{
    perspective: 1px;
    transform-style: preserve-3d;
    overflow-x: hidden;   
    overflow-y: auto;
}

#column-1{
    width: 5vw;
    background-color: #bdbcb7; 
    height: 100vh;
}

#mobile-menu{
    display: none;
}

#offcanvasExample{
    width: 40vw;
}

.parallax-wrapper{
    width: 95vw;
    height: 100%;
    box-sizing: border-box;
    transform-style: preserve-3d;
}

.parallax-wrapper::before{
    content: "";
    width: 95vw;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url(assets/BACKGROUND.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute; 
    z-index: -1;
    transform: translateZ(-1px) scale(2.69);
}

#imgport1 {
    overflow: hidden; 
}

#imgport1 img {
    transition: transform .5s ease;
}

#imgport1:hover img {
    transform: scale(1.3);
    transition: transform 2s, filter 1.5s ease-in-out;
    transform-origin: center center;
    filter: brightness(50%);
}

.bar1, .bar2, .bar3 {
    width: 50px;
    height: 5px;
    background-color: #3a3a32;
    margin: 3px 0;
    transition: 0.4s;
}

.menu-item:hover{
    color: #bdbcb7;
}

.menulogo:hover>div{
    background-color: white;
    margin: 1px 0;
}

.menuclose:hover>div{
    background-color: white;
}

.execheader{
    color: #bdbcb7;
    transition:  1s ease-in-out;
    cursor: pointer;
}

.execheader:hover{
    color: #e2e1dd;
    width: 40vw;
    transition:  1s ease-in-out;
}

.contato-info{
    background-color: #52514c;
    color: #e2e1dd;
    width: 100.6%;
}

.section-title{
    font-size: 3vw;
}

.modal-main{
    max-width: 75%;
}

.executa-mobile{
    display: none;
}

#image-mobile{
    display: none;
}


@font-face {
    font-family: sansation;
    src: url(sansation_regular.ttf);
}

@font-face {
    font-family: sansation-light;
    src: url(sansation_light.ttf);
}

@font-face {
    font-family: sansation-bold;
    src: url(sansation_bold.ttf);
}
  
body{
    font-family: sansation;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    #column-1{
      display: none;
    }

    #mobile-menu{
        display:flex;
        background-color: #bdbcb7;
    }

    #offcanvasExample{
        width: 100vw;
    }

    #menu-open{
        margin: 0px !important;
    }

    .parallax-wrapper{
        width: 100vw;
        height: 99.5%;
    }

    #inicio{
        padding: 0px !important;
        margin-top: 5vh;
        padding-top: 5vh !important;
        padding-left: 1vh !important;
    }

    #carousel-inicio{
        padding: 0px;
    }

    #sobre-div{
        padding: 2% !important;
    }

    #executamos, .portfolio-title, .contato-col{
        margin: 0px !important;
        padding: 5% !important;
    }

    #exec-1, #exec-2, .execheader, .exectext, .port-image, .contato-col, .logo-contato, .carousel{
        width: 100% !important;
    }
    #exec-2{
        margin-top: 5% !important;
    }

    .port-image{
        margin-top: 5vh !important;
    }

    .contato-info{
        width: 102.6%;
        padding: 0% !important;
    }

    .modal-main{
        max-width: 90%;
    }

    .executa-pc{
        display: none;
    }

    .executa-mobile{
        display: block;
    }

    .section-title{
        font-size: 8vw;
    }

    #image-pc{
        display: none;
    }

    #image-mobile{
        display: block;
    }
  }