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

  
body{
    font-family: sansation-light;
}

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

#column-1{
    width: 14vw;
}


#offcanvasExample{
    width: 40vw;
}

.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;
}

.frase{
    scale: .8; opacity: 0;
    animation: fade-in linear forwards;
    animation-timeline: view();
    animation-range: 250px 500px;
}

#mobile-menu{
    display: none;
}

#sobre{
    height: 100vh; 
    overflow: auto; 
    perspective: 1px; 
    background-color: #e2e1dd;
}

.main-section-2{
    position: absolute; 
    display: flex; 
    flex-direction: column; 
    color: #e2e1dd; 
    height: 80%; 
    justify-content: space-between;
}

#mid-section-mobile{
    display: none;
}

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


#image-mobile{
    display: none;
}

@keyframes fade-in {
    to{ scale: 1; opacity: 1;}
}



@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);
}

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

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

    #offcanvasExample{
        width: 100vw;
    }

    #sobre{
        margin-top: 8vh;
    }

    .col-mobile, .contato-col{
        width: 100% !important;
    }

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

    .frase, .contato-col{
        margin: 0% !important;
        padding: 5% !important;
    }

    #mid-section-pc{
        display: none;
    }

    #mid-section-mobile{
        display: block;
    }

    .main-section-m{
        position: absolute; 
        display: flex; 
        flex-direction: column; 
        color: #e2e1dd; 
        height: 90%; 
        justify-content: space-evenly;
    }

    #image-pc{
        display: none;
    }

    #image-mobile{
        display: block;
    }

}