@media screen and (max-width: 1200px) {
    html{
        font-size: 16px;
    }
}


@media screen and (max-width: 768px) {
    html{
        font-size: 15px;
        font-family: 'Fira Sans', sans-serif;
    }

    /* header */

    header{
        display: none;
    }

    .main-navigation{
		position: fixed;
		top:0;
		right:0;
		padding:80px 20px;
		width:100%;
		height:100vh;
		background-color: rgba(255, 255, 255 , 0.9) ;
		opacity: 0;
		visibility: hidden;
		transform: translateX(100%);
        padding: 0;
        padding-top: 60px;
	}

	.main-navigation.active{
		 opacity: 1;
		 visibility: visible;
		 transform: translateX(0);
		 transition: 0.3s;
	}

	.main-navigation a{
		display: block;
		margin:auto;
		margin-bottom: 8px;
		padding:12px;
        text-align: center;
        font-size: 1.2rem;
	}

	.main-navigation a.btn{
		text-align: center;
        width: 200px;
        border-radius: 10px;
        color: #fff;
        border: 2px solid #fff;
        background-color: #614f4f;

	}


    .mobile-header{
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        width: 100%;
        height: 60px;
        top:0;
        left: 0;
        z-index: 310;
		background-color: rgba(255, 255, 255 , 0.9) ;
    }

    .mobile-header a{
        position: relative;
        z-index: 310;
        color: black;    
    }

    .mobile-header .main-navigation a:hover{
        color:red;
    }

    .mobile-header .main-navigation a.btn:hover{
        color:#fff;
    }
    
    .more-btn{
		display: block;
		position: absolute;
		right: 12px;
		top:10px;
		width:40px;
		height: 40px;
		border-radius: 8px;
		border: none;
		border-color: transparent;
        z-index: 310;
	}

	.more-btn .icon{
 		display: block;
		width: 24px;
		height: 24px;
		margin: 0 auto;
		background: url(../icons/more.png) no-repeat center;
		background-size: contain;

	}

	.more-btn.active .icon{
		background: url(../icons/close.png) no-repeat center;
		background-size: contain;

	}


}