@charset "utf-8";

@media screen and (min-width: 0px) and (max-width: 890px) {

    .flex { 
        column-gap: 70px;
    }

}

@media screen and (min-width: 0px) and (max-width: 760px) {

    .menu {
        font-size: 27px;
    }

    .menu img {
        width: 280px;
    }

}

@media screen and (min-width: 0px) and (max-width: 690px) {

    .menu {
        font-size: 26px;
    }
    
    .menu img {
        width: 270px;
    }

    h2 {
	    padding: 18px 26px;
	    font-size: 23pt;
    }
    
    }

@media screen and (min-width: 0px) and (max-width: 670px) {

    .flex { 
        column-gap: 60px;
    }

    .text {
       padding: 0px 25px 30px 25px;
    }
        
}

@media screen and (min-width: 0px) and (max-width: 640px) {

    .flex { 
        column-gap: 50px;
    }

    .text {
       width: 90%;
    }
    
}

@media screen and(min-width: 0px) and (max-width: 610px) {

    .op {
        height: 410px;
    }

    .flex { 
        column-gap: 40px;
    }

    .bigtitle {
        padding: 10px;
        height: 400px;
        width: 180px;
    }

    .bigtitle h1 {
        font-size: 30pt;
    }

    .bigtitle p {
        font-size: 43pt;
    }

    .menu {
        font-size: 23px;
    }
    
    .menu img {
        width: 240px;
    }

    .text {
        font-size: 13pt;
    }

    .contact-text {
	font-size: 13pt;
    }

    .text2 h4{
         font-size: 15pt;
    }
    .text2 h5{
         font-size: 8pt;
    }
}

@media screen and (min-width: 0px) and (max-width: 560px) {

    .op {
        height: 390px;
    }

    .bigtitle {
        padding: 10px;
        height: 370px;
        width: 170px;
    }

    .bigtitle h1 {
        font-size: 28pt;
    }

    .bigtitle p {
        font-size: 38pt;
    }

    .text {
        font-size: 12pt;
    }
        
    .contact-text {
	font-size: 12pt;
    }

    .text2 h4{
         font-size: 15pt;
    }
    .text2 h5{
         font-size: 8pt;
    }

    }

@media screen and (min-width: 0px) and (max-width: 540px) {

    .op {
        height: 370px;
    }

    .bigtitle {
        padding: 10px;
        height: 350px;
        width: 155px;
    }

    .bigtitle h1 {
        font-size: 23pt;
    }

    .bigtitle p {
        font-size: 35pt;
    }
    
    .menu {
        font-size: 21px;
    }
    
    .menu img {
        width: 210px;
    }
    
    }

@media screen and (min-width: 0px) and (max-width: 530px) {

    .contact-text {
        width: 80%;
    }

    .text2 h4{
         font-size: 15pt;
    }

    .text2 h5{
         font-size: 8pt;
    }
    
    }

@media screen and (min-width: 0px) and (max-width: 520px) {

    .menu {
        font-size: 21px;
    }

    .text {
         font-size: 11pt;
    }
    .contact-text {
	 font-size: 11pt;
    }
    .text2 h4{
         font-size: 15pt;
    }
    .text2 h5{
         font-size: 8pt;
    }
            
    }

@media screen and (min-width: 0px) and (max-width: 490px) {
    
    .op {
        height: 360px;
    }

    .flex { 
        column-gap: 30px;
    }

    .bigtitle {
        padding: 10px;
        height: 330px;
        width: 140px;
    }

    .bigtitle h1 {
        font-size: 21pt;
        margin-left: 15px;
    }

    .bigtitle p {
        font-size: 35pt;
    }

    .menu {
        font-size: 20px;
    }
    
    .menu img {
        width: 200px;
    }

    .text {
        font-size: 10pt;
        padding: 0px 19px 30px 19px;
    }

    .contact-text {
	font-size: 10pt;
    }

    .text2 h4{
         font-size: 15pt;
    }
    .text2 h5{
         font-size: 8pt;
    }
    
    }

@media screen and (min-width: 0px) and (max-width: 440px) {

    .op {
        height: 340px;
    }

    .bigtitle {
        padding: 10px;
        height: 300px;
        width: 140px;
    }

    .bigtitle h1 {
        font-size: 20pt;
        margin-left: 24px;
    }

    .bigtitle p {
        font-size: 32pt;
    }

    .menu {
        font-size: 18px;
    }
    
    .menu img {
        width: 180px;
    }
    
    }

@media screen and (min-width: 0px) and (max-width: 430px) {
   
    .menu {
        font-size: 17px;
    }
    
    .menu img {
        width: 170px;
    }

    .text {
         font-size: 9pt;
    }

    .contact-text {
	font-size: 9pt;
    }

    .text2 h4{
         font-size: 15pt;
    }
    .text2 h5{
         font-size: 8pt;
    }
                    
    }

@media screen and (min-width: 0px) and (max-width: 400px) {

    .op {
        height: 340px;
    }

    .flex { 
        column-gap: 25px;
    }

    .bigtitle {
        padding: 10px;
        height: 300px;
        width: 125px;
    }

    .bigtitle h1 {
        font-size: 18pt;
        margin-left: 16px;
    }

    .bigtitle p {
        font-size: 30pt;
    }

    .menu {
        font-size: 16px;
    }
    
    .menu img {
        width: 160px;
    }

    h2 {
	padding: 14px 18px;
	font-size: 18pt;
    }

    .text2 h4{
         font-size: 15pt;
    }
    .text2 h5{
         font-size: 8pt;
    }
    
    }

@media screen and (min-width: 0px) and (max-width: 390px) {
    
    .text {
         font-size: 8pt;
    }

    .contact-text {
	font-size: 8pt;
    }

    .text2 h4{
         font-size: 15pt;
    }
    .text2 h5{
         font-size: 8pt;
    }


                        
    }