
 @font-face {
    font-family: lobster ;
    src: url(tipos/Lobster/Lobster-Regular.ttf);
 }

 @font-face {
    font-family: roboto;
    src: url(tipos/Roboto/Roboto-Italic-VariableFont_wdth\,wght.ttf);
 }
body {
	
	font-size: 12pt;
	color: rgb(220, 220, 220);
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    background-color: black;

}

#cima {

padding: 30px;
display: flex;
flex-wrap: wrap;
justify-content: space-between

}

#imgg {
    display: flex;
  justify-content: space-evenly
}

#rtele {
    display: none;
}

#botoes {
    align-items: center;
    display: flex;
    justify-content: space-around
    
    
}

#mresp {
    display: none;
}

#cimg {
  margin-top: 100px;
  display: flex;
  justify-content: center;  
  align-items: center; 
  margin-bottom: 100px;
  width: 100%;
  
  
}

#rimgtele {
 display: none;
}


#botoes a {
    width: 100px ;
    height: 40px ;
    margin-left: 50px;
    background-color: rgb(214, 41, 21);
    font-size: 20px;
    font-family: roboto;
    color: aliceblue;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;

}

#text {
    margin: 150px;
    width: 100%;
}

h1 {
    margin-bottom: 50px;
    font-family: roboto;
    width: 100%;
    color: rgb(252, 191, 58);
    margin-top: 70px;
  
}

#p1 {

    font-family: lobster ;
    width: 100%;
    max-width: 500px;
   
}

#p2 {

    font-family: lobster ;
    width: 100%;
    max-width: 500px;
    margin-left: 30%;
    margin-top: 50px;
   
}

#menumobile {
    position: fixed;
    z-index: 100;
    width: 100%;
    height: 100vh;
    top: -120%;
    left: 0;
    background-color: rgba(9, 9, 9, 0.831); 
    display: none;
    transition: top .5s;

} 

#imgx {
  margin-left: 90%;
  margin-top: 3%;
}


#botoesx  {
    width: 100% ;
    margin-top: 50px;
    font-size: 30px;
   

}

#botoesx a {
    font-family: roboto;
    color: aliceblue;
    text-decoration: none;
    text-transform: uppercase;
    display: block;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;

}





@media  (max-width: 820px) {

    #botoes {
        display: none;

    }

    #mresp {
        display: block;
        max-width: 360px;
        flex-wrap: wrap;
    }

    #imgg {
      display: none;
    }
    
    #rtele {
        display: block;
    }

    #cimg {
       display: none;
        
        
      }
      
      #rimgtele {
       display: block;
       margin: 25px
      
      }

     



    #text {
        margin: 30px 20px;
    }

    #p1 {

        font-family: lobster ;
        max-width: 300px;
       
    }

    #p2 {


        font-family: lobster ;
        max-width: 300px;
        margin-left: 0%;
        margin-top: 90px;
       
    }

    #imgx {
        margin-left: 80%;
        margin-top: 5%;
      }
      
      #menumobile {
        display: block;

    }

}
 
    






    
