@charsetnull="UTF-8";

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
background-color: #ffffff;
}

#container {
background-color: #ffffff;
max-width: 1200px;
height: auto;
margin: auto;
padding: 30px;
}

#header {
max-width: 100%;
height: 675px;    
background:#000000;
display: flex;  
}

#title {
font-family: 'Inter', sans-serif;
font-style: normal;
font-size: 133px;    
color: #ffffff;
align-content: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)    
}

#subtitle {
font-family: 'Inter', sans-serif;
font-family: 'Roboto', sans-serif;    
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 33px;
letter-spacing: 0.02em;
color: #ffffff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding-top: 180px;  
padding-right: 335px;   
}

#bato {
font-family: 'Inter', sans-serif;
font-style: normal;
font-weight: 700;
font-size: 60px;
line-height: 85px;
letter-spacing: -0.025em;   
margin: 24px;    
}

#texto {
font-family: 'Inter', sans-serif;
font-family: 'Roboto', sans-serif;       
font-weight: 400;
font-size: 17px;
line-height: 30px;
letter-spacing: 0.1em;
color: #000000;
max-width: 561px;
flex-direction: column;
margin-right: 24px;    
}

#bato_img {
display: flex;    
justify-content: right;
flex-direction: column; 
max-height: 50%;    
}

#artigo {
align-items: flex-start;
display: flex;
justify-content: space-between;
margin: 24px;    
}

#artigo_img {
max-width: 100%;
justify-content: space-between;
align-items: flex-start;
display: flex; 
}
 
#b_r_c {
padding-top: 2%;
padding-right: 2%;
padding-bottom: 2%;
padding-left: 2%;     
}

#b_j_r_c {
padding-top: 2%;
padding-right: 2%;
padding-bottom: 2%;
padding-left: 2%;     
}

#B_J_R_C_MOBILE {
display: none;    
}

#B_R_C_mobile {
display: none;    
}

#B_R_C {
max-width: 50%;
padding-top: 2%;
padding-right: 2%;
padding-bottom: 2%;
padding-left: 2%;     
}

#b_j_o {
width: 1100px;
justify-content: space-between;
align-items: flex-start;
display: flex; 
margin: 24px;   
}

#artigo2 {
padding-right: 2%;
padding-left: 2%; 
padding-bottom: 2%;
padding-top: 2%;
max-width: 100%;
justify-content: space-between;
align-items: flex-start;
display: flex; 
}

#texto2 {
font-family: 'Inter', sans-serif;
font-family: 'Roboto', sans-serif;       
font-weight: 400;
font-size: 18px;
line-height: 33px;
letter-spacing: 0.1em;
color: #000000;
text-align: left    ;
max-width: 600px;
width: 100%;
justify-content: right; 
margin-left: 24px    
}

#video {
max-width: 100%;
padding-right: 2%;
padding-left: 2%; 
display: flex;    
}

#artigo_img_2{
max-width: 100%;
justify-content: space-between;
align-items: flex-start;
display: flex; 
}

#B_A_H {
max-width: 50%;
padding-top: 2%;
padding-right: 1%;
padding-bottom: 2%;
padding-left: 2%;    
}

#B_A_T {
max-width: 50%;
padding-top: 2%;
padding-right: 2%;
padding-bottom: 2%;
padding-left: 1%;    
}

#CTA {
height:auto;     
background:#000000;
display: flex;
padding: 24px;
justify-content: center; 
align-items:center;
display: flex;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 24px;    
width: 25%;
height: auto;    
}

#R_M {
font-family: 'Inter', sans-serif;
font-family: 'Roboto', sans-serif;       
font-weight: 400;
font-size: 30px;
line-height: 33px;
letter-spacing: 0.1em;
color: #ffffff;
margin: 22px;
}

#footer {
max-width: 1200px;
height: 358px;    
background:#000000;
display: flex;
    
}

#BEYONCE_FOOTER{
font-family: 'Inter', sans-serif;
font-style: normal;
font-size: 82px;
color: #ffffff;
align-content: center;
position: absolute;
transform: translate(90%, 115%);
text-align: center;
}
 
#CP {
font-family: 'Inter', sans-serif;
font-family: 'Roboto', sans-serif;       
font-weight: 600;
font-size: 12px;
line-height: 29px;
letter-spacing: 0.1em;
color: #ffffff;  
transform: translate(250%, 420%);
}    
    










@media screen and (max-width:360px) {
    
#header {
height: 100px; 
width: 100%        
}
    
#title {
font-size: 50px;
left: 175px;
top: 70px;
}   
    
#subtitle {
font-size: 10px;
padding: 0px; 
width: 312px;        
left: 209px;
top: 105px;        
}   
  
#artigo {
flex-direction:column-reverse;    
}    
    
#bato {
font-family: 'Inter', sans-serif;
font-style: normal;        
font-weight: 600;
font-size: 39px;
line-height: 55px;    
text-align: center;
letter-spacing: -0.025em;  
margin-bottom: 0px;
margin-top: 24px;    
}
    
#texto {
max-width: 360px;
width: 100%;
text-align: justify;
hyphens: manual;
}
    
#bato_img {
width: 252px;
height: auto; 
margin: 24px;
margin-top: 0px;  
margin-left: 0px;
margin-top: 24px;    
}

#b_j_r_c {
display: none;       
}
    
#b_r_c {
display: none;        
    }    

#B_J_R_C_MOBILE {
display: block;
width: 138px;
margin: 24px;
margin-top: 0px;      
margin-right: 12px; 
margin-left: 0px;    
} 
    
#B_R_C_mobile {
display: block; 
width: 138px;
margin: 24px;
margin-left: 12px; 
margin-right: 0px;    
margin-top: 0px    
    } 
    
#b_j_o {
width: 100%;
margin: 24px; 
margin-left: 0px; 
margin-top: 0px         
    }    

#artigo_img_mobile {
max-width: 100%;
justify-content: space-between;
align-items: flex-start;
display: flex;        
     }    
#artigo2 {
flex-direction:column;    
}      
    
#texto2 {
margin: 0px;
margin-top: 24px;
margin-bottom: 24px;    
text-align: justify;
hyphens: manual;    
}
    
#BA {
width: 300px;    
width: 100%;
margin: 0px; 
margin-left: 0px; 
margin-top: 0px; 
padding: 0px;      
} 
    
#video {
width: 300px; 
height: auto;        
}
  
#CTA {
padding: 12px; 
height: 50px;
width: 100%;
margin-right: 0px;
margin-left: 0px; 
margin-top: 12px;    
}
    
#R_M {
width: 300px;
font-size: 15px; 
transform: translate(30%, -2%);     
margin: 0px; 
}
    
#footer {
height: 107px;          
}
    
#BEYONCE_FOOTER {
font-size: 38px;  
top: 663%;
left: -23%;        
}
    
#CP {
font-size: 7px; 
line-height: 15px;        
transform: translate(85%, 205%)        
}





}



